小程序上添加水印

背景

       领导说在小程序页面添加水印，如果业务员截屏发给别人的话就会留下他的名字，这样的作用是方便追责，领导还说要给小程序全屏覆盖水印，还要实现无痕水印（就是肉眼看不出来，拿截屏的图片来分析出这个人是谁，这样可以找到是哪个业务员截屏的），经过几个小时的百度和研究，发现全屏覆盖做水印的话，水印下的按钮等触发方法没办法进行执行，传说中 的无痕水印是对图片的处理，而不是应用在页面上，最终给出一个解决方案，就是在没有按钮触发和点击的位置进行水印覆盖，别的地方则不进行处理，具体代码如下：

通过画布进行水印绘制

    <!-- 水印 -->
  <view class='water_top'> 
      <canvas canvas-id='myCanvas1' style='width:100%;height:280rpx;'></canvas>
  </view>

css样式：

.water_top {
  position: absolute;
  z-index: 999;
  opacity: 0.9;
  top: 0rpx;
  width: 100%;
}

js代码：

drowsyUserinfo: function () {
    var userInfo = wx.getStorageSync('userInfo');
    var name_xx = userInfo.username || userInfo.nickName;
    var ctx = wx.createCanvasContext("myCanvas1");

    ctx.rotate(45 * Math.PI / 180);//设置文字的旋转角度，角度为45°；

    //对斜对角线以左部分进行文字的填充
    for (let j = 1; j < 10; j++) { //用for循环达到重复输出文字的效果，这个for循环代表纵向循环
      ctx.beginPath();
      ctx.setFontSize(20);
      ctx.setFillStyle("rgba(169,169,169,.2)");

      ctx.fillText(name_xx, 0, 50 * j);
      for (let i = 1; i < 10; i++) {//这个for循环代表横向循环，
        ctx.beginPath();
        ctx.setFontSize(20);
        ctx.setFillStyle("rgba(169,169,169,.2)");
        ctx.fillText(name_xx, 80 * i, 50 * j);
      }
    }//两个for循环的配合，使得文字充满斜对角线的左下部分

    //对斜对角线以右部分进行文字的填充逻辑同上
    for (let j = 0; j < 10; j++) {
      ctx.beginPath();
      ctx.setFontSize(20);
      ctx.setFillStyle("rgba(169,169,169,.2)");

      ctx.fillText(name_xx, 0, -50 * j);
      for (let i = 1; i < 10; i++) {
        ctx.beginPath();
        ctx.setFontSize(20);
        ctx.setFillStyle("rgba(169,169,169,.2)");
        ctx.fillText(name_xx, 80 * i, -50 * j);
      }
    }
    ctx.draw();
  },

水印效果不方便上传，就截小部分效果看看

以上为加水印的全部过程，如有疑问，欢迎随时沟通，谢谢。