关于前端:前端页面动态添加水印

能够给页面指定标签增加水印背景，原理是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') + ')';}