小程序添加水印

八月 31, 2021 3958
需求：需要小程序中添加一层水印，显示特定信息，比如姓名、账户名称等，以防人员截图泄露隐私数据，以前没做过，写下博客作为记录
两个思路
  1. 直接使用 wxml 用标签循环遍历渲染 dom 定位在界面上
  2. 使用 canvas 画布定位在界面上

1.canvas 封装组件使用

canvas 需要设置与当前页面相同的宽高，才能完全覆盖

wxml

1
2
3
<view class='water_top'>
  <canvas bindtap="pageTap" canvas-id='myCanvas1' style='width:100%;height:{{canvasHeight}}px;'></canvas>
</view>

将水印定位在页面上，并设置透明度

wxss

1
2
3
4
5
6
7
.water_top {
  position: absolute;
  z-index: 0;
  top: 0;
  opacity: 0.9;
  width: 100%;
}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
  ready() {
    // 获取当前页面的总高度，赋值给canvas的高度
    const query = wx.createSelectorQuery()
    query.select(`#${this.data.pageId}`).boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec((res) => {
      this.setData({
        canvasHeight: res[0].height
      })
     //  开始使用canvas画水印
      this.drowsyUserinfo()
    })
  }

  // canvas画水印的方法
drowsyUserinfo() {
    let name_xx = app.globalData.userInfo.engName;
    let ctx = wx.createCanvasContext("myCanvas1", this);
    ctx.rotate(45 * Math.PI / 180); //设置文字的旋转角度，角度为45°；

    //以下采用两次循环遍历是因为canvas旋转后只能盖住一半部分无法完全盖住页面，所以需要针对另一半部分继续遍历以达到整个页面覆盖水印的效果
    //对斜对角线以左部分进行文字的填充
    for (let j = 1; j < this.data.canvasHeight/100; j++) { //用for循环达到重复输出文字的效果，这个for循环代表纵向循环
      ctx.beginPath();
      ctx.setFontSize(16);
      ctx.setFillStyle("rgba(169,169,169,.2)");
      ctx.fillText(name_xx, 0, 100 * j);

      for (let i = 1; i < this.data.canvasHeight/100; i++) { //这个for循环代表横向循环，
        ctx.beginPath();
        ctx.setFontSize(16);
        ctx.setFillStyle("rgba(169,169,169,.2)");
        ctx.fillText(name_xx, 100 * i, 100 * j);
      }
    }
    //两个for循环的配合，使得文字充满斜对角线的左下部分
    //对斜对角线以右部分进行文字的填充逻辑同上
    for (let j = 0; j < this.data.canvasHeight/100; j++) {
      ctx.beginPath();
      ctx.setFontSize(16);
      ctx.setFillStyle("rgba(169,169,169,.2)");
      ctx.fillText(name_xx, 0, -100 * j);

      for (let i = 1; i < this.data.canvasHeight/100; i++) {
        ctx.beginPath();
        ctx.setFontSize(16);
        ctx.setFillStyle("rgba(169,169,169,.2)");
        ctx.fillText(name_xx, 100 * i, -100 * j);
      }
    }
    ctx.draw()
  },

2.wxml 封装组件使用

wxml

1
2
3
4
5
6
7
<view class="water-mark-mask">
  <view class="row" wx:for="{{rows}}" wx:key='index'>
    <view class="col" wx:for="{{cols}}" style="color:{{color}}" wx:key='index'>
      {{text}}
    </view>
  </view>
</view>

此处为固定定位，水印会定在原地不会跟着页面滚动而滚动，亦可以根据上方 canvas 方法改变水印高度并改为绝对定位，就可以跟随页面滚动而滚动
wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.water-mark-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  pointer-events: none;
  flex:1;
}

.row{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.col{
  transform: rotate(-45deg);
  height: 200rpx;
}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
data: {
    text: '张三',
    color: 'rgba(0,0,0,0.1)',
    rows: [],
    cols: []
  },
  lifetimes: {
    ready() {
      this.attached()
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    attached() {
      const {
        windowWidth,
        windowHeight
      } = wx.getSystemInfoSync();
      console.log(windowWidth,
        windowHeight);
      const rows = Math.ceil(windowWidth / (28 * this.data.text.length));
      const cols = Math.ceil(windowHeight / 120);
      this.setData({
        rows: new Array(rows),
        cols: new Array(cols)
      });
      console.log(this.data);
    },
  }
查看评论