HTML5 添加水印

添加水印的思路

1. 通过动态添加水印的div，平铺在页面上，给div的point-event样式设置为none，添加一个透明度就可以了，这种实现比较简单，但是效果可能不是很好。
2. 通过canvas绘制对应的水印图形以及文字，然后转成base64编码的地址，附加在需要添加水印的页面的根元素上，作为背景图。

第二种思路的实现如下

function addWaterMarker(option) {

  const {
    name = '',
    rootDom = '.Main-Mobile',
    textColor = '#3eaa94',
    opacity = 0.4,
  } = option;

  const canvas = document.createElement('canvas');
  //水印显示的背景容器

  // body.appendChild(can);

  canvas.width = 200;
  canvas.height = 200;
  canvas.style.display = 'none';

  var ctx = canvas.getContext('2d');
  ctx.rotate(20 * Math.PI / 180);
  ctx.globalAlpha = opacity;
  ctx.font = "16px Microsoft JhengHei";
  //cans.fillStyle = "rgba(17, 17, 17, 0.50)";
  ctx.fillStyle = textColor;
  ctx.textAlign = 'left';
  ctx.textBaseline = 'Middle';
  const img = new Image();
  img.src = logo; // 将需要在水印上显示的图片绘制，一般是logo，这个地方取得是本地的，也可以从外面传入
  img.onload = function () {
    ctx.drawImage(img, 10, 0, 38, 20); 
    ctx.fillText(name, 55, 20);
    document.querySelector(rootDom) && (document.querySelector(rootDom).style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")");
    document.querySelector(rootDom) && (document.querySelector(rootDom).style.backgroundPosition = "50px");
  }
}

其它问题

• 如果遇到需要向图片上加水印的话，有两种思路。

1. 将水印的内容先平铺到canvas中，然后将该图片也绘制到该canvas上，做一个叠加，最后导出地址，再使用。
2. 将图片加一层蒙版，设置与图片重叠，并且point-events为none，然后将水印绘制到蒙版上。

• 如果出现了canvas.toDataURL('image/png')报错，一般是由于跨域问题，需要保证使用的图片和canvas所在的页面在同一个域名下。