uniapp 自定义图片水印插件（任意位置） Ba-Watermark

三杯五岳

已于 2022-11-06 14:45:14 修改

阅读量1.8k

点赞数

分类专栏： uni-app 文章标签：水印原生插件 uniapp 前端

于 2022-09-26 13:07:24 首次发布

本文链接：https://blog.csdn.net/u013164293/article/details/127018386

版权

uni-app 专栏收录该内容

65 篇文章 27 订阅

订阅专栏

自定义图片水印 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	是否重复