npm install web-watermark
or
yarn add web-watermark
- 支持 Canvas 或 SVG 渲染水印;
- Canvas 支持 Retina 高清显示;
import Watermark from 'web-watermark'
new Watermark({
mode: 'canvas', // default
container: document.body, // default
watch: true, // default
text: '敏感信息请勿泄漏', // default
x: 0, // default
y: 50, // default
width: 150, // default
height: 100, // default
color: '#000', // default
fontSize: 12, // default
fontStyle: 'normal', // default
fontFamily: 'sans-serif', // default
alpha: 0.15, // default
deg: -15, // default
}).render()
参数 |
取值 |
说明 |
mode |
String: 'canvas' |
水印渲染的模式,可选 'canvas' 或 'svg' 渲染 |
container |
Node: document.body |
需要渲染水印的元素,默认为 body,即整个页面渲染 |
watch |
Boolean: true |
监听水印元素是否被篡改,被修改或者删除等操作,则重新渲染水印 |
text |
String: '敏感信息请勿泄漏' |
水印信息 |
x |
Number: 0 |
水印 x 轴偏移量,用于微调水印位置 |
y |
Number: 50 |
水印 y 轴偏移量,用于微调水印位置 |
width |
Number: 150 |
水印图片的宽度 |
height |
Number: 100 |
水印图片的高度 |
color |
String: '#000' |
水印字体颜色 |
fontSize |
Number: 12 |
水印字体大小 |
fontFamily |
String: 'sans-serif'' |
水印字体 |
fontStyle |
String: 'normal' |
水印字体样式,可选值和 CSS font-style 相同 |
alpha |
Number: 0.15 |
水印透明度 |
deg |
Number: -15 |
水印的倾斜角度,顺时针方向角度增加,以9点钟方向为0度 |
debugger |
Boolean: false |
是否开启调试模式 |
实例方法 |
参数 |
说明 |
render(options) |
配置参数,如果传递了配置参数,会合并最近的配置 |
渲染水印,调用此函数才会生成水印 |
destroy() |
- |
销毁水印 |