最新 小程序整个页面添加水印，防止截图

小程序整个页面添加水印，防止截图 某些情况下，为防止用户将单位内部数据截图分享导致信息泄露，会在app全局增加一个水印浮层，这样即使被截图或者被拍照，也能轻易查清泄露源头。

小程序开发日常遇到的坑点 先记录避免忘记
本来是打算自己弄 发现服务过期了，还是随大流吧 备注下 避免以后需要用到
目前这个支持的版本为

image.png

主要是针对之前的水印进行了优化 因为upg这个插件很坑 ~~

代码核心了各位小伙伴

  .watermark {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background: #eeeeee11;
        pointer-events: none;
        background-repeat: repeat;
        background-size: 50% auto;
    }
    .canvas {
        width: 200px;
        height: 200px;
        position: fixed;
        left: -200%;
    }

     //获取转base64方法
     function base64({
          url,
          type = 'png'
       }) {
        return new Promise((resolve, reject) => {
            wx.getFileSystemManager().readFile({
                filePath: url, //选择图片返回的相对路径
                encoding: 'base64', //编码格式
                success: res => {
                    resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
                },
                fail: res => reject(res.errMsg)
            })
          })
        }
         //小程序内脚本
          data:{
            backgroundImg: ''
           },
           WaterRemark(){
            let drawTitle = '测试的水印代码'
            console.log(drawTitle);
            // 获取画布
            const ctx = wx.createCanvasContext('waterMarkCanvas')
            // 设置倾斜角度
            ctx.rotate(20 * Math.PI / 180)
            // 设置水印字体字号
            ctx.setFontSize(14)
            // 设置色值，注意最后的透明度参数
            ctx.setFillStyle('rgba(188, 188, 188, 0.3)')
            // 绘制文字，注意左边和上面margin留一点，不然由于旋转会被遮挡
            ctx.fillText(drawTitle, 10, 10)
            ctx.draw();
            setTimeout(() => {
                console.log("延迟保存水印")
                wx.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: 400,
                    height: 100,
                    // destWidth: 160,
                    // destHeight: 160,
                    canvasId: 'waterMarkCanvas',
                    success: async(res) => {
                        try {
                            console.log(res.tempFilePath)
                            const backgroundImg= await base64({
                                url: res.tempFilePath
                            })
                            console.log('backgroundImg');
                            console.log(backgroundImg);
                            this.setData({backgroundImg});
                        } catch (error) {
                            console.log(error);
                        }
                    }
                })
            }, 500)
         },
        onLoad(){
            //执行绘制水印
            this.WaterRemark()
        }          

image.png

好了结束