前言

项目需要使用canvas水印

调研

对比前端实现水印，发现canvas转图片是最好的一种方案

实现

首先创建canvas，然后绘制问题，然后转为图片，最后作为dom的背景图，使用repeat模式填满背景图。

代码

var cpyName = str;
      if (str.length > 16) {
        cpyName = str.substring(0, 16);
      }
      var can = document.createElement('canvas');
      var report = $('.content')[0];
      can.width = 180;
      can.height = 110;
      can.style.display = 'none';
      can.style.zIndex = '999'
 
      var cans = can.getContext('2d');
      cans.rotate(-25 * Math.PI / 180);
      cans.font = "800 30px Microsoft JhengHei";
      cans.fillStyle = "rgba(0,0,0,0.5)";
      cans.textAlign = 'center';
      cans.textBaseline = 'Middle';
      if(cans.measureText(cpyName).width > 180) {
        var size = 180 / cpyName.length
        cans.font = '800 ' + size +'px '+ ' Microsoft JhengHei'
      }
      cans.fillText(cpyName, 60, 100);
      report.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";

总结

巧妙地使用image的repeat模式实现水印