更新记录

1.2.1(2024-05-20) 下载此版本

新增第三种水印样式

1.1.0(2024-05-19) 下载此版本

新增第二种水印样式 修改展示图

1.0.1(2024-05-18) 下载此版本

  • 新增内容自适应
  • 设置组件扩展入口,方便后续扩展
  • 修复已知bug
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

mask-lly 水印组件

安装

直接在插件市场购买安装

使用

<mask-lly ref="masklly">
<button @click="getMask">完成</button><!-- 自定义插槽 -->
</mask-lly>
onReady() { // 必须在onReady中使用  或者确定页面挂在完成后调用
    // 打开弹窗
    this.$refs.masklly.open({
        url:"https://img0.baidu.com/it/u=1116044439,3598757562&fm=253&fmt=auto&app=120&f=JPEG?w=561&h=327", // 示例路径  可以是本地路径、网络路径、临时路径,使用时自行替换
        width:'90vw', // 弹窗内容宽度 带单位 默认 730rpx
        height:'80vh', // 弹窗内容高度 带单位 默认 730rpx 
        maskClick:true // 遮罩层点击 true点击可关闭   false 点击不可关闭
        compressImage:{ // 图片压缩配置(不支持H5)
            width:'auto', // 缩放宽度 number|'auto'
            height:'auto',// 缩放随宽度缩放 number|'auto'
            compressedWidth:'auto', // 压缩后宽度 number|'auto'  建议和width保持一致
            compressedHeight:'auto', // 压缩后高度 number|'auto' 建议和height保持一致
            quality:80, //0~100  压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效)
        }
    })
    // 添加水印 样式一 示例在右侧图片
    this.$refs.masklly.setMask_box({ // 在open之后调用
        position:1, //水印位置 1左上 2右上 3左下 4右下 5居中
        content:['这是一条水印内容','这是可自动换行的水印内容这是可内容这是可内容这是可'], // 每行文字内容,自动换行
        lineMax:15, // 每行最多文字数,超过自动换行 , 默认 15
        color:'red', // 文字颜色  支持16进制  rgb rgba
        lineHeight:20, // 行高
        feedPadding:24, // 文字超出后后续行缩进 可以为负数
        maskStyle:'rgba(0,0,0,0.4)', // 水印背景颜色 支持16进制  rgb rgba
        fontSize:'12px',// 带单位 px ,不穿默认为16px
        fontFamily:'auto',
        padding:12, // 内边距
    })
    // 添加水印  样式二 示例在右侧图片
    this.$refs.masklly.setMask_text({ // 在open之后调用 
        text:"lly-mask",
        fontSize:'18px',// 不支持auto
        fontFamily:'auto',
        color:'rgba(255,255,255,0.5)', // 十六进制 rgba
        densityx:4, // x轴密度 0~100 越大越密集
        densityy:4, // y轴密度 0~100 越大越密集
        rotate:0.5, // 文字旋转角度 -1 ~ 1
    })

    // 添加水印  样式三 示例在右侧图片
    this.$refs.masklly.setMask_img({
        path:"../../static/zz.png", // 覆盖图路径 本地 临时 网络
        width:120, // 缩放宽度 number  // 自定义覆盖图宽度
        height:100, // 缩放高度 bnumber  // 自定义图片高度
        x:0, // x轴位置 0-1 原点左上角
        y:0.84, // y轴位置 0-1 原点左上角
    })
},
methods: {
        async getMask(){
            // 获取水印图片
            let res = await this.$refs.masklly.getMask()
        }
}

注意

水印样式可叠加使用 水印样式 方向 大小 背景 透明度等支持自定义

隐私、权限声明

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

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

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

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问