js实现图片添加水印

watermark

介绍

图片加水印，支持文字水印、图片水印，支持多行

安装

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

参数	说明	类型	可选值	默认值
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

源码

码云仓库
Github仓库