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

27次阅读

共计 595 个字符，预计需要花费 2 分钟才能阅读完成。

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

正文完