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

自定义图片水印 Ba-Watermark

简介（下载地址）

效果展示

使用方法

引用

在 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（文档）

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

html 水印插件,jquery图片水印插件
Img2Blob.js是一款可以为图片添加自定义水印的jquery插件.该jquery图片水印插件可以将图片转换为blob对象,然后为其添加自定义水印效果. 使用方法在页面中引入jquery和img ...
WordPress图片水印插件 Easy Watermark
1.概述 WordPress图片水印插件Easy Watermark 是一款实现上传图片自动添加水印LOGO功能的高效插件.当我们在WordPress网站后台上传图片文件到媒体库时,或者在发布文章上传 ...
wordpress图片水印插件DX-Watermark
DX-Watermark是一款功能齐全的wordpress图片水印插件,可以自动给上传的图片添加文本或者图片水印. 后台截图: 文本水印: 图片水印: 选项说明: 类型:可选择文本或图片水印两种类型, ...
typecho图片水印插件
注意插件目录必须为 waterMark,不然会无法启用. 如果使用后无法上传图片,请检查是否安装 php-gd 更新 2021-9-27 取消了对 typecho 版本的要求增加了 2x 水印的支 ...
CSDN| CSDN自定义图片水印
文章目录 https://blog.csdn.net/blogdevteam/article/details/82747121 默认水印效果: 无水印效果: 去掉参数watermark既可. 自定义水 ...
jquery 插件任意位置浮动固定层
-------------------------------------jquery.floatDiv.js--------------------------------------------- ...
bmp图片显示（任意位置任意大小）
文章目录前言图片显示 1.普通全屏(800*480)显示bmp 2.在任意位置显示任意大小bmp图片头文件前言 Linux系统,GEC6818,800*480,bmp图片图片显示由文件IO ...
uniapp 自定义通知（耳机电量）插件 Ba-NotifyEarphone
简介(下载地址) Ba-NotifyEarphone 是一款定制自定义通知样式的插件(耳机电量),有其他定制需要可联系作者. 耳机电量通知,支持自定义颜色,图片等支持监听点击事件支持判断是否打开通 ...
Uniapp 应用消息通知插件 Ba-Notify
应用消息通知插件 Ba-Notify 简介(下载地址) Ba-Notify 是一款功能全面的uniapp应用消息通知插件,可在状态栏显示各种样式的消息提醒. 包含普通通知.大图通知.多行通知.进度通知 ...