Greasy Fork is available in English.
JavaScript 图片文字水印、图片图片水印生成工具，生成 base64 编码图片。
이 스크립트는 직접 설치해서 쓰는 게 아닙니다. 다른 스크립트가 메타 명령 // @require https://update.greasyfork.org/scripts/452322/1360569/js-watermark.js(으)로 포함하여 쓰는 라이브러리입니다.
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();
@param file File对象
@return {Boolean} 是否载入成功
通过 file 对象载入图片文件时使用。
@param src {String} 带有 data:image/... 前缀的图片 base64 编码字符串
通过 base64 载入图片文件时使用，每次调用此方法时将图片更新到实例中，参数值为带有image前缀的图片 base64 编码字符串。
@return {Boolean} 当前实例中是否包含图片
判断当前实例是否包含图片（调用setFile或setImage成功后将会包含）。
@return {Object} 当前图片尺寸
用以获取当前图片尺寸，返回格式{ width: 0, height: 0 }。
@return {String} 当前实例原图 base64 编码的字符串
返回原图。
@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 文字最大宽度，超过宽度会换行，默认值100px。xMoveDistance 每个文字的左右间距，取值范围 不限，默认值30，最好是测量出文字占据宽度+文字间距。yMoveDistance 每个文字的上下间距，取值范围 不限，默认值30，最好是测量出文字占据高度+文字间距。@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。@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+图片间距。@param type {String} 图片类型，可传入`jpeg`（不支持透明）或`png`（支持透明），默认为`jpeg`。
@return {String} 原图添加水印后的 base64 编码的字符串
绘制结果图片，返回base64编码字符串。
@return {String} 原图添加水印后的 blob格式的URL，可以直接访问该链接，该方法为`异步`，需要同步请用`await`或者`then`
绘制结果图片，返回base64编码字符串。
清空水印信息，下一次调用addText方法时会在原图基础上进行绘制。
方式1 - 传入 file 对象，通过主动调用实例方法生成水印图：在线demo
方式2 - 传入 file 对象，通过主动调用实例方法生成水印像素文字图：在线demo