更新记录
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