小程序整个页面添加水印，防止截图 某些情况下，为防止用户将单位内部数据截图分享导致信息泄露，会在app全局增加一个水印浮层，这样即使被截图或者被拍照，也能轻易查清泄露源头。
小程序开发日常遇到的坑点 先记录避免忘记
本来是打算自己弄 发现服务过期了，还是随大流吧 备注下 避免以后需要用到
目前这个支持的版本为
image.png
主要是针对之前的水印进行了优化 因为upg这个插件很坑 ~~
代码核心了各位小伙伴
<view>
<canvas class="canvas" canvas-id="waterMarkCanvas"></canvas>
</view>
<view class="watermark" style='background-image: url({{backgroundImg}});'></view>
.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
