简介

wmp-watermark 是一款微信小程序水印自定义组件，通过canvas合成图片和文字水印，自动铺满水印至整个图片，结合了懒加载一起使用，可大大优化加载速度。

效果图

使用

初始化项目

npm init

安装

npm i @chenbz/wmp-watermark

构建npm

工具 => 构建npm

使用

/pages/home/index.json

{
    "usingComponents": {
        "wmp-watermark": "@chenbz/wmp-watermark"
    }
}

/pages/home/index.wxml

<view>
  <wmp-watermark imageUrl="https://s1.ax1x.com/2022/05/08/OlHYdA.png"></wmp-watermark>
</view>

属性

| 属性名 | 类型 | 默认值 | 描述 | | ------------ | ------- | ----------------------------------------- | ----------------- | | imageUrl | String | https://s1.ax1x.com/2022/05/08/OlbiFI.gif | 图片url（必传！） | | lazyImageUrl | String | https://s1.ax1x.com/2022/05/08/OlbiFI.gif | "加载中"图片url | | content | String | 请勿外传,盗版必究 | 水印文字 | | contentColor | String | rgba(255,255,255,.5) | 水印字体颜色 | | contentSize | Number | 15 | 水印字体大小 | | level | Number | 60 | 水印水平间距 | | vertical | Number | 150 | 水印垂直间距 | | lazy | Boolean | true | 懒加载 |