js-watermark

JavaScript 图片文字水印、图片图片水印生成工具,生成 base64 编码图片。

Этот скрипт недоступен для установки пользователем. Он является библиотекой, которая подключается к другим скриптам мета-ключом // @require https://update.greasyfork.org/scripts/452322/1470429/js-watermark.js

Автор
WhiteSevs
Версия
0.0.1.20241024082843
Создан
01.10.2022
Обновлён
24.10.2024
Лицензия
Недоступно

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} 当前实例中是否包含图片

判断当前实例是否包含图片(调用setFilesetImage成功后将会包含)。

.getSize()

@return {Object} 当前图片尺寸 

用以获取当前图片尺寸,返回格式{ width: 0, height: 0 }

.getPreview()

@return {String} 当前实例原图 base64 编码的字符串

返回原图。

.addText(opts)

@param opts {Object} 水印文字样式配置

参数详解:

  • text全局水印文字,在添加水印时若不指定水印文字,则会默认使用全局水印文字,默认值为[Call By waterMark.addText],可以有多个文字,随机设置到图片中。
  • fontSize全局水印字体大小,单位pxvw,其中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,最好是测量出文字占据高度+文字间距

.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