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所在的頁面在同一個域名下。