介绍
图片加水印，支持文字水印、图片水印，支持多行
安装
npm install @sangtian152/watermark --save
# or
yarn add @sangtian152/watermark
使用
import watermark from '@sangtian152/watermark';
const can = new watermark(url, options);
can.addText('文字水印', {repeat: true, lineSpacing: 146, markSpacing: '50%' })
can.addText('测试水印居中', {repeat: false, fontSize: 36, position: {right: '50%', bottom: '50%'}, translate: '50%,50%'})
can.addImage(mark, {repeat: true, markHeight: 26, lineSpacing: 146, start: 36})
can.draw(function() {
console.log('水印设置成功')
const img = can.getBase64()
})
参数
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| url |
要添加水印的图片地址 |
String |
— |
— |
| options |
全局配置参数，详见options |
Object |
— |
— |
方法
| 名称 |
说明 |
参数 |
| addText |
添加文字水印 |
text, options（当前水印配置参数） |
| addImage |
添加图片水印 |
url, options（当前水印配置参数） |
| draw |
绘制图片，在addText/addImage之后调用 |
callback:Function |
| getBase64 |
获取图片base64地址，需在draw方法的回调函数内调用 |
—— |
| getBlob |
获取Blob对象，需在draw方法的回调函数内调用 |
—— |
| getFile |
获取File对象，需在draw方法的回调函数内调用 |
—— |
options
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| clip |
添加水印区域，如：{type: 'rect', padding: '10%'}，type形状，可选值rect和circle，padding边距（参考css中padding用法），接受数组或逗号（,）隔开的字符串，支持百分数和数字 |
Object |
— |
— |
| defineClip |
自定义水印区域，参数为canvas的context对象，支持调用canvas原生方法，绘制任意形状水印区域 |
Function |
— |
— |
| fontSize |
文字水印字体大小 |
Number |
— |
26 |
| fillStyle |
文字水印字体颜色 |
String |
— |
#ffffff |
| globalAlpha |
水印透明度 |
Number |
0-1之间小数 |
0.2 |
| position |
水印位置 |
Object |
— |
{left: 10, top: 10} |
| crossOrigin |
是否开启跨域（需后端支持） |
Boolean |
— |
false |
| translate |
水印根据给定的参数，从当前元素位置移动 |
String/Array |
— |
0 |
| repeat |
水印是否重复 |
Boolean |
— |
false |
| rotate |
水印旋转角度，repeat为true时有效 |
Number |
— |
-45 |
| start |
水印起始位置，repeat为true时有效 |
Number |
— |
0 |
| markSpacing |
两个相邻水印间隔，repeat为true时有效 |
Number/String |
— |
50% |
| lineSpacing |
两行相邻水印间隔，repeat为true时有效 |
Number/String |
— |
60 |
最新版本
