更新记录
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文字的大小。
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
关于兼容性
此插件适用于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