@psz/watermask

A library for watermasking web pages by canvas.

Screenshot

Install

npm

npm install watermask-lib --save

Usage

font

new WaterMask({
    font: 'Baidu百度'
})

image

new WaterMask({
    image: 'xxx.png'
})

Full options

new WaterMask({
    font: "",
    fontType: 'Microsoft YaHei',
    size: 24,
    container: container,
    color: "#333",
    alpha: 0.2,
    rotate: 340,
    scale: 1,
    startX: 20,
    startY: 20,
    rows: 10,
    cols: 10,
    xGap: 200,
    yGap: 100,
    image: '',
    repeat: true,
    checkDom: true,
    checkFrequency: 60 * 1000
})

Options

Key	Type	Default	Description
container	object	document.querySelector("#watermask")
font	string		Render font, required if image property is undefined
fontType	string	Microsoft YaHei
size	number	24	Fontsize
image	string		Render image, required if font property is undefined. Priorit to font property
color	string	#333
alpha	number	0.2	Global canvas transparency
rotate	number	340	deg
scale	number	1
repeat	boolean	true	Font or image will be repeat in x and y axis
startX	number	20	px, will be used only when repeat property is true
startY	number	20	px, will be used only when repeat property is true
rows	number	10
cols	number	10
xGap	number	200	px, will be used only when repeat property is true
yGap	number	100	px, will be used only when repeat property is true
checkDom	boolean	true	check watermask canvas is existed
checkFrequency	number	60 * 1000	check frequency ms