更新记录

1.0.2(2025-09-09) 下载此版本

chore: package.json 修改

1.0.1(2025-09-09) 下载此版本

docs: readme更新

1.0.0(2025-09-09) 下载此版本

feat: watermark产出

查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
× - - × × - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
× × × × × - × × × ×

wsd-watermark

基于wsd-render-wxml-to-canvas^1.0.2组件实现水印组件,请确保wsd-render-wxml-to-canvas一起安装。 wsd-render-wxml-to-canvas基于wxml-to-canvas,请记得在pages.json 全局引用wsd-render-wxml-to-canvas包中的wxml-to-canvas,否则水印将会不能如你所愿。

基础用法

通过content指定水印文本,同时width 和 height属性必须传

基于wsd-render-wxml-to-canvas,因此width/height必须传递,否则水印绘制存在缺陷参考

<view class="demo-module__content">
    {{ 'content '.repeat(10) }}
    <wsd-watermark
        content="watermark"
        :width="20"
        :height="20"
        :gap="2"
        :fontSize="10"
        :rotate="-30"
    ></wsd-watermark>
</view>

多行文本水印

content可以直接传递文本数组,将得到多行水印。

图片水印

通过image指定图片文本,image优先级高于content。

Props

name type description required default
width Number 水印尺寸-宽度-必填 true -
height Number 水印尺寸-高度-必填 true -
content [Array, String] 文本水印内容 false ""
image String 图片水印url false ""
wrapperStyle Object 水印wrapper样式 false -
customStyle Object 自定义水印样式:.wrapper/.img/.text,参考 false -
gap Number 水印间距-水平/垂直 false 0
gapX Number 水印间距-垂直,比gap优先 false 0
gapY Number 水印间距-垂直,比gap优先 false 0
rotate Number 水印wrapper样式 false -30
fontSize Number 文本水印字号 false 10
lineHeight Number 文本水印行高 false 12
color String 文本水印颜色 false "#a9a9a9"
opacity Number 水印透明 false 0.75
zIndex Number 水印层级 false 9999
fullscreen Boolean 是否全屏绘制水印 false false

Events

Exposes

name type description
watermarkImg ref\<string> 水印图片

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。