小程序整個(gè)頁面添加水印顽素，防止截圖 某些情況下，為防止用戶將單位內(nèi)部數(shù)據(jù)截圖分享導(dǎo)致信息泄露徒蟆，會(huì)在app全局增加一個(gè)水印浮層胁出，這樣即使被截圖或者被拍照，也能輕易查清泄露源頭段审。
小程序開發(fā)日常遇到的坑點(diǎn) 先記錄避免忘記
本來是打算自己弄 發(fā)現(xiàn)服務(wù)過期了全蝶，還是隨大流吧 備注下 避免以后需要用到
目前這個(gè)支持的版本為
image.png
主要是針對(duì)之前的水印進(jìn)行了優(yōu)化 因?yàn)閡pg這個(gè)插件很坑 ~~
代碼核心了各位小伙伴
<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%;
}
//獲取轉(zhuǎn)base64方法
function base64({
url,
type = 'png'
}) {
return new Promise((resolve, reject) => {
wx.getFileSystemManager().readFile({
filePath: url, //選擇圖片返回的相對(duì)路徑
encoding: 'base64', //編碼格式
success: res => {
resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
},
fail: res => reject(res.errMsg)
})
})
}
//小程序內(nèi)腳本
data:{
backgroundImg: ''
},
WaterRemark(){
let drawTitle = '測(cè)試的水印代碼'
console.log(drawTitle);
// 獲取畫布
const ctx = wx.createCanvasContext('waterMarkCanvas')
// 設(shè)置傾斜角度
ctx.rotate(20 * Math.PI / 180)
// 設(shè)置水印字體字號(hào)
ctx.setFontSize(14)
// 設(shè)置色值，注意最后的透明度參數(shù)
ctx.setFillStyle('rgba(188, 188, 188, 0.3)')
// 繪制文字寺枉，注意左邊和上面margin留一點(diǎn)抑淫，不然由于旋轉(zhuǎn)會(huì)被遮擋
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(){
//執(zhí)行繪制水印
this.WaterRemark()
}
image.png
