更新记录

1.0.3(2024-03-28) 下载此版本

修复加水印后图片变大的问题。

1.0.2(2024-03-13) 下载此版本

解决小程序端使用动态canvasid导致报错的bug。

1.0.1(2024-03-11) 下载此版本

1.组件内部canvas-id随机生成,避免因为canvasId重复而出现的bug。 2.shortLength为0时自动计算fontSize文字的大小。

查看更多

平台兼容性

uni-app

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

其他

多语言 暗黑模式 宽屏模式 蒸汽模式
× × √ ×

关于兼容性

此插件适用于APP项目(Android/Ios)、H5项目,小程序

插件说明

一个简单的添加水印的插件,支持设置水印背景,文字颜色等,使用Promise返回结果,对于需要批量处理的场景更加友好,不支持文字换行。

addWatermark(url,textlist,options) 方法说明

参数名 是否必填 值类型 说明
url 是 String 需要添加水印的图片地址(本地路径)
textlist 是 String Array 水印文字
options 否 object 水印配置

options 参数说明

参数名 默认值 值类型 说明
fontSize 14 Number 文字大小 ,shortLength为0是自动计算文字大小
shortLength 375 Number 图片短边的长度,设置为0时使用图片的原始尺寸,值越大,添加水印的等待时间越长
padding 10 Number 阴影的内边距
textGap 6 Number 行间距
color #ffffff String 字体颜色
bgColor rgba(0,0,0,0.3) String 背景颜色
waitTime 30 Number canvas绘制完成后的等待时间,毫秒值

返回参数说明

参数名 值类型 说明
url String 处理过后的图片的临时路径,h5端为base64,如果其他端需要 base64 可使用image-tools的pathToBase64方法进行转换

代码示例

<template>
    <view>
        <easy-watermark ref="waterMark" />
        <button @click="chooseImage">选择图片</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                textList: [
                    '户主姓名: 朱建文',
                    '拍摄时间: 2023年12月18日 10时28分27秒',
                    '地点: 武汉市洪山区欢乐大道xxxx号',
                    '经度: 114.362282、纬度: 30.578512',
                    '施工单位: 武汉市光谷xxx有限公司',
                    '营销人员: 管理员',
                ]
            }
        },
        methods: {
            chooseImage() {
                const waterMark = this.$refs.waterMark

                uni.chooseImage({
                    count: 10,
                    success: async e => {
                        uni.showLoading({
                            title: '图片处理中'
                        })
                        const url = e.tempFilePaths[0]
                        const path = await waterMark.addWatermark(url, this.textList)
                        uni.hideLoading()
                        uni.previewImage({
                            urls: [path]
                        })
                    }
                })
            },
        }
    }
</script>

bug反馈

使用过程中如有任何问题,请在评论区留言或联系邮箱:suchengc@cnovit.com

隐私、权限声明

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

无

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

插件不采集任何数据

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

无

许可协议

MIT协议