Este script não deve ser instalado diretamente. Este script é uma biblioteca de outros scripts para incluir com o diretório meta // @require https://update.greasyfork.org/scripts/452322/1413240/js-watermark.js
js-watermark
JavaScript 图片文字水印、图片图片水印生成工具,生成 base64 编码图片,可以传入file对象或者base64图片。
项目
Github地址:https://github.com/WhiteSevs/js-watermark
因无法使用jsdelivr引用本项目,所以在greasyfork
上新建一个库
使用示意
① tampermonkey引入
//@require https://greasyfork.org/scripts/452322-js-watermark/code/js-watermark.js
② 调用(通过base64
传入的用法)
async function addWater(bgBase64Src){
var watermark = new Watermark();
watermark.clearMark(); // 清空之前的水印信息,如果new方法在外面的话使用它
await watermark.setImage(bgBase64Src); // 该方法是异步
watermark.addText( {
text: ['Call By waterMark.addText','你需要添加水印的文字,至少放一个'],
fontSize: '5vw',
...参数很多就不举例了
});
return watermark;
}
var waterObj = addWater();
var waterBase64Src = waterObj.render('png');
var waterBlobUrl = '';
waterObj.renderBlob().then( (blobUrl)=>{
waterBlobUrl = blobUrl;
});
③ 调用(通过file
传入的用法)
async function addWater(fileObj){
var watermark = new Watermark();
watermark.clearMark(); // 清空之前的水印信息,如果new方法在外面的话使用它
await watermark.setFile(fileObj); // 该方法是异步
watermark.addText( {
text: ['Call By waterMark.addText','你需要添加水印的文字,至少放一个'],
fontSize: '5vw',
...参数很多就不举例了
});
return watermark.render('png');
}
let uploadFile = document.querySelector("input[type='file']#filedata").files[0]; // 页面中file控件中的files对象数组中的一个文件
addWater(uploadFile);
④ 调用(通过base64
传入的用法且添加图片
水印)
async function addWater(bgBase64Src){
var watermark = new Watermark();
watermark.clearMark(); // 清空之前的水印信息,如果new方法在外面的话使用它
await watermark.setImage(bgBase64Src); // 该方法是异步
watermark.addImage( {
imageArray: [new Image(),new Image(),...],
width: 50,
height: 50,
...参数很多就不举例了
});
return watermark.render('png');
}
addWater();
实例方法
.setFile(file)
@param file File对象
@return {Boolean} 是否载入成功
通过 file 对象载入图片文件时使用。
.setImage(src)
@param src {String} 带有 data:image/... 前缀的图片 base64 编码字符串
通过 base64 载入图片文件时使用,每次调用此方法时将图片更新到实例中,参数值为带有image
前缀的图片 base64 编码字符串。
.hasImage()
@return {Boolean} 当前实例中是否包含图片
判断当前实例是否包含图片(调用setFile
或setImage
成功后将会包含)。
.getSize()
@return {Object} 当前图片尺寸
用以获取当前图片尺寸,返回格式{ width: 0, height: 0 }
。
.getPreview()
@return {String} 当前实例原图 base64 编码的字符串
返回原图。
.addText(opts)
@param opts {Object} 水印文字样式配置
参数详解:
text
全局水印文字,在添加水印时若不指定水印文字,则会默认使用全局水印文字,默认值为[Call By waterMark.addText]
,可以有多个文字,随机设置到图片中。
fontSize
全局水印字体大小,单位px
或vw
,其中px
为绝对值,vw
为相对值,100vw
等于当前图片宽度,默认值为6vw
。
fontFamily
全局字体类型,默认值为Microsoft Yahei
。
color
全局字体颜色,默认值为#000000
。
textAlign
文字对齐方式, 参数有left
|center
|right
,默认值center
。
stroke
文字描边,默认值为false
。
globalAlpha
透明度,取值范围 0.00 ~ 1.00,默认值0.7
。
rotateAngle
旋转角度,取值范围 -360 ~ 360,默认值50
。
maxWidth
文字最大宽度,超过宽度会换行,默认值100
px。
xMoveDistance
每个文字的左右间距,取值范围 不限,默认值30
,最好是测量出文字占据宽度
+文字间距
。
yMoveDistance
每个文字的上下间距,取值范围 不限,默认值30
,最好是测量出文字占据高度
+文字间距
。
.addPixelText(opts)
@param opts {Object} 像素水印文字样式配置
text
全局水印文字,在添加水印时若不指定水印文字,则会默认使用全局水印文字,默认值为像素文字水印
。
big
要绘制的文字像素配置信息。
fontSize
要绘制的文字像素 文字大小,默认值为150
。
fontFamily
要绘制的文字像素 字体类型,默认值为微软雅黑
。
textAlign
要绘制的文字像素 文字对齐方式,参数有left
|center
|right
,默认值center
。
rotateAngle
要绘制的文字像素 旋转角度,取值范围 -360 ~ 360,默认值0
。
stroke
要绘制的文字像素 描边,默认值为false
。
small
组成绘制的文字像素配置信息。
fontSize
组成绘制的文字像素配置信息 文字大小,默认值为10
。
fontFamily
组成绘制的文字像素配置信息 字体类型,默认值为微软雅黑
。
color
组成绘制的文字像素配置信息 字体颜色,默认值为#000
。
textAlign
组成绘制的文字像素配置信息 文字对齐方式,参数有left
|center
|right
,默认值center
。
color
组成绘制的文字像素配置信息 透明度,默认值为0.7
。
.addImage(opts)
@param opts {Object} 水印图片样式配置
参数详解:
imageArray
必须设置,水印Image对象,可以有多个图片,随机设置到图片中。
width
参数imageArray
中图片占据的宽度,默认值50
。
height
参数imageArray
中图片占据的高度,默认值50
。
globalAlpha
透明度,取值范围 0.00 ~ 1.00,默认值0.5
。
rotateAngle
旋转角度,取值范围 -360 ~ 360,默认值0
。
xMoveDistance
每个图片的左右间距,取值范围 不限,默认值70
,最好是参数width
+图片间距
。
yMoveDistance
每个图片的上下间距,取值范围 不限,默认值70
,最好是参数height
+图片间距
。
.render(type)
@param type {String} 图片类型,可传入`jpeg`(不支持透明)或`png`(支持透明),默认为`jpeg`。
@return {String} 原图添加水印后的 base64 编码的字符串
绘制结果图片,返回base64
编码字符串。
.renderBlob()
@return {String} 原图添加水印后的 blob格式的URL,可以直接访问该链接,该方法为`异步`,需要同步请用`await`或者`then`
绘制结果图片,返回base64
编码字符串。
.clearMark()
清空水印信息,下一次调用addText
方法时会在原图基础上进行绘制。
在线预览
方式1 - 传入 file 对象,通过主动调用实例方法生成水印图:在线demo
方式2 - 传入 file 对象,通过主动调用实例方法生成水印像素文字图:在线demo