uniapp 自定义图片水印插件（任意位置） Ba-Watermark
自定义图片水印 Ba-Watermark
简介（下载地址）
Ba-Watermark 是一款uniapp给图片自定义水印的插件。
- 支持添加多个、多种样式水印
- 支持在任意位置添加
- 支持按实际像素或图片高宽的比例两种方式设置
- 支持stroke字体样式
- 支持某个水印重复铺满
效果展示
使用方法
引用
在 script 中引入组件
const watermark = uni.requireNativePlugin('Ba-Watermark')
示例
可在页面 script 中调用（示例参考，可根据自己业务和调用方法自行修改）
methods: {
addWatermark() {
watermark.addWatermark({ //添加水印
path: this.path,
outputPath: this.outputPath,
watermarks: [{
text: "2022-9-23 21:06:03",
textColor: "#ffffff",
textSizeMode: 1,
textSize: 0.05,
marginMode: 1,
margin: 0.05,
layoutGravity: 1
}, {
text: "北京市",
textColor: "#ffffff",
textSizeMode: 1,
textSize: 0.05,
marginMode: 1,
margin: 0.05,
marginBottom: 3 * 0.06,
layoutGravity: 2
}, {
text: "西城区",
textColor: "#ffffff",
textSizeMode: 1,
textSize: 0.05,
marginMode: 1,
margin: 0.05,
marginBottom: 2 * 0.06,
layoutGravity: 2
}, {
text: "北海公园",
textColor: "#ffffff",
textSizeMode: 1,
textSize: 0.05,
marginMode: 1,
margin: 0.05,
marginBottom: 1 * 0.06,
layoutGravity: 2
}, ]
},
(res) => {
console.log(res);
this.path = "";
if (res.outputPath) {
this.path = res.outputPath;
}
uni.showToast({
title: res.msg,
icon: "none",
duration: 3000
})
});
},
addWatermark2() {
watermark.addWatermark({ //添加水印
path: this.path,
outputPath: this.outputPath,
watermarks: [{
text: "水印",
textColor: "#ff0000",
textSizeMode: 1,
textSize: 0.05,
textStyle: 1,
degrees: 45,
marginMode: 1,
margin: 0.05,
isRepeat: true,
}, {
text: "Precious things are very few in this world. that is the reason there is just one you.",
textColor: "#00ff00",
textSizeMode: 2,
textSize: 0.05,
textStyle: 2,
marginMode: 1,
marginTop: 0.08,
lineSpacing: 1,
}, {
text: "左上",
textColor: "#0000ff",
textSizeMode: 2,
textSize: 0.05,
textStyle: 2,
layoutGravity: 0,
}, {
text: "右上",
textColor: "#0000ff",
textSizeMode: 2,
textSize: 0.05,
textStyle: 2,
layoutGravity: 1,
}, {
text: "右下",
textColor: "#0000ff",
textSizeMode: 2,
textSize: 0.05,
textStyle: 2,
layoutGravity: 2,
}, {
text: "左下",
textColor: "#0000ff",
textSizeMode: 2,
textSize: 0.05,
textStyle: 2,
layoutGravity: 3,
}, {
text: "左中",
textColor: "#0000ff",
textSizeMode: 2,
textSize: 0.05,
textStyle: 2,
layoutGravity: 4,
}, {
text: "上中",
textColor: "#0000ff",
textSizeMode: 2,
textSize: 0.05,
textStyle: 2,
layoutGravity: 5,
}, {
text: "右中",
textColor: "#0000ff",
textSizeMode: 2,
textSize: 0.05,
textStyle: 2,
layoutGravity: 6,
}, {
text: "下中",
textColor: "#0000ff",
textSizeMode: 2,
textSize: 0.05,
textStyle: 2,
layoutGravity: 7,
}, {
text: "居中",
textColor: "#0000ff",
textSizeMode: 2,
textSize: 0.05,
textStyle: 2,
layoutGravity: 8,
}],
},
(res) => {
console.log(res);
if (res.outputPath) {
this.path = res.outputPath;
}
uni.showToast({
title: res.msg,
icon: "none",
duration: 3000
})
});
},
}
方法清单
| 名称 | 说明 |
|---|---|
| addWatermark | 添加水印 |
addWatermark 方法参数
添加水印
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| path | String | true | ‘’ | 原图片路径 |
| outputPath | String | false | ‘/data/data/包名/watermark/watermark.png’ | 图片输出路径，有默认值，可以不填 |
| watermarks | Array | true | ‘’ | 自定义水印配置，多个 |
watermarks 数组内对象参数
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| text | String | true | ‘’ | 文本 |
| textColor | String | true | ‘#ffffff’ | 文本字体颜色 |
| textSize | Number | 建议 | 0.05 | 文本字体大小，默认0.05是按图片宽度比例（或高度） |
| textSizeMode | Number | 建议 | 1 | 文本字体大小方式（0：像素尺寸 1：宽度占比 2：高度占比 3：长边占比 4：短边占比） |
| textStyle | Number | false | 0 | 文本字体样式，0:FILL 1:STROKE 2:FILL_AND_STROKE |
| strokeWidth | Number | false | 1 | stroke 宽度 |
| layoutGravity | Number | 0 | 水印相对位置，0：左上 1：右上 2：右下 3：左下 4：左居中 5：上居中 6：右居中 7：下居中 8：居中 | |
| degrees | Number | false | 0 | 水印旋转角度，如 45 |
| marginMode | Number | false | 0 | 边距距离方式。0：像素尺寸 1：宽度占比 2：高度占比 3：长边占比 4：短边占比 |
| marginLeft | Number | false | 0 | 左边距 |
| marginright | Number | false | 0 | 右边距 |
| marginTop | Number | false | 0 | 上边距 |
| marginBottom | Number | false | 0 | 下边距 |
| lineSpacing | Number | false | 1 | 相对行间距，相对字体大小，1.5表示行间距为1.5倍的字体高度（注意起始值是1，0为同一行） |
| isRepeat | Boolean | false | false | 是否重复 |
系列插件
图片选择插件 Ba-MediaPicker （文档）
图片编辑插件 Ba-ImageEditor （文档）
文件选择插件 Ba-FilePicker （文档）
应用消息通知插件 Ba-Notify（文档）
应用未读角标插件 Ba-Shortcut-Badge （文档）
应用开机自启插件 Ba-Autoboot（文档）
扫码原生插件（毫秒级、支持多码）（文档）
动态修改状态栏、导航栏背景色、字体颜色插件 Ba-AppBar（文档）
原生sqlite本地数据库管理 Ba-Sqlite（文档）
安卓保活插件 Ba-KeepAlive（文档）
安卓快捷方式（桌面长按app图标） Ba-Shortcut（文档）
自定义图片水印 Ba-Watermark（文档）