能够给页面指定标签增加水印背景,原理是 canvas 画图,canvas.toDataURL() 转成 base64 数据,动静增加到标签的 background。
/**
* 动静增加水印
* @param {String} str 水印内容
*/
function addWaterMark(str) {const body = document.getElementById('content');
const canvas = document.createElement('canvas');
body.appendChild(canvas);
canvas.width = 210;
canvas.height = 210;
canvas.style.display = 'none';
var cans = canvas.getContext('2d');
cans.rotate((-20 * Math.PI) / 180);
cans.font = '12px Microsoft JhengHei';
cans.fillStyle = 'rgba(17, 17, 17, 0.1)';
cans.textAlign = 'left';
cans.textBaseline = 'Middle';
cans.fillText(str, 30, 105, 200);
body.style.backgroundImage = 'url(' + canvas.toDataURL('image/png') + ')';
}