小程序上添加水印

背景

       領導說在小程序頁面添加水印，如果業務員截屏發給別人的話就會留下他的名字，這樣的作用是方便追責，領導還說要給小程序全屏覆蓋水印，還要實現無痕水印（就是肉眼看不出來，拿截屏的圖片來分析出這個人是誰，這樣可以找到是哪個業務員截屏的），經過幾個小時的百度和研究，發現全屏覆蓋做水印的話，水印下的按鈕等觸發方法沒辦法進行執行，傳說中 的無痕水印是對圖片的處理，而不是應用在頁面上，最終給出一個解決方案，就是在沒有按鈕觸發和點擊的位置進行水印覆蓋，別的地方則不進行處理，具體代碼如下：

通過畫布進行水印繪製

    <!-- 水印 -->
  <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();
  },

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

以上爲加水印的全部過程，如有疑問，歡迎隨時溝通，謝謝。