前端页面加水印

/** 水印添加方法 */

const setWatermark = (str1, str2) => {

const id = '1.23452384164.123412415';

if (document.getElementById(id) !== null) {

document.body.removeChild(document.getElementById(id));

}

const can = document.createElement('canvas');

// 设置canvas画布大小（这里决定了水印的密集程度）

can.width = 320;

can.height = 210;

const cans = can.getContext('2d');

cans.rotate((-20 * Math.PI) / 180); // 水印旋转角度

cans.font = '24px Vedana';

cans.fillStyle = '#666666';

cans.textAlign = 'center';

cans.textBaseline = 'Middle';

cans.fillText(str1, can.width / 2 - 80, can.height - 70);  // 水印在画布的位置x，y轴

cans.fillText(str2, can.width / 2 + 20, can.height + 50);

const div = document.createElement('div');

div.id = id;

div.style.pointerEvents = 'none';

div.style.top = '150px';

div.style.left = '0px';

div.style.opacity = '0.15';

div.style.position = 'fixed';

div.style.zIndex = 100000;

div.style.width = `${document.documentElement.clientWidth}px`;

div.style.height = `${document.documentElement.clientHeight}px`;

div.style.background = `url(${can.toDataURL('image/png')}) left top repeat`;

document.body.appendChild(div);

return id;

};

// 添加水印方法

export const setWaterMark = (str1, str2) => {

let id = setWatermark(str1, str2);

if (document.getElementById(id) === null) {

id = setWatermark(str1, str2);

}

};

// 移除水印方法

export const removeWatermark = () => {

const id = '1.23452384164.123412415';

if (document.getElementById(id) !== null) {

document.body.removeChild(document.getElementById(id));

}

};