小程序頁面增加水印
效果
?
?
?
因為所有頁面都要加水印，所以肯定是要用自定義組件實現。愛掏網 - it200.com
思考路程
第一種
最開始考慮的是canvas生成圖片，轉換成base64做一張背景圖，然后才了解到水印不能直接在元素上作為背景作為頁面的最底層，很容易被其他東西覆蓋，所以水印一定是要要fixed在頁面的最頂層。愛掏網 - it200.com canvas生成圖片，但是要借用其他插件轉成base64
第二種
可以采用DOM元素靠樣式實現，也不需要依賴插件，感覺這個更加的不錯。愛掏網 - it200.com于是就代碼擼起來，然后每個頁面都能有水印了，看起來是成功了。愛掏網 - it200.com但是！！當切換登錄人以后發現有的頁面水印上的登錄人怎么還是上一個登錄人的信息呢？原來component的生命周期事件是依賴于所在頁面的，如果頁面從未銷毀過，Component有些事件就不會再次觸發了。愛掏網 - it200.com于是，我產生了第一種思路，如何能讓組件監聽到所在頁面的聲明周期，看小程序文檔確實有這樣的方法，但是依賴的基礎庫版本比較高，那用戶是低版本基礎庫豈不是不會生效了。愛掏網 - it200.comemmmm再想想，那登錄的時候保證讓打開過的所有頁面銷毀就可以了啊，當前跳轉登錄頁使用的方法是wx.navigateTo(會保留當前頁面，然后跳轉，所以有些頁面不銷毀，組件獲取用戶id的方法就不會觸發第二次了)，那退出登錄的時候調用wx.reLaunch（關閉所有頁面，然后跳轉頁面）方法就ok
實現代碼
- 使用canvas畫圖,使用upng.js插件將圖片轉化成base64 這里需要引入一些轉base64的js，upng.js以及upng.js的依賴pako.min.js
github.com/photopea/UP…
import UPNG from './upng';
const CANVAS = 'water_mark_id';
Component({
data: {
text: '請勿外傳',
imgBase64: '',
color:'rgba(0,0,0,0.5)'
},
attached() {
const { text, color } = this.data;
const ctx = wx.createCanvasContext(CANVAS, this);
ctx.rotate((335 * Math.PI) / 180);
ctx.setFontSize(20);
ctx.setFillStyle(color);
ctx.fillText(text, 0, 100);
ctx.draw(false, () => {
setTimeout(() => {
wx.canvasGetImageData({
canvasId: CANVAS,
x: 0,
y: 0,
width: 120,
height: 100,
success: (res) => {
const pngData = UPNG.encode([res.data.buffer], res.width, res.height);
const base64 = wx.arrayBufferToBase64(pngData);
this.setData({ imgBase64: 'data:img/jpg;base64,' + base64 });
},
fail: (err) => {
console.log(err);
}
}, this);
}, 2000);
});
}
});
只需要修改里面的顏色clolor? 和 text? 文本就可以。愛掏網 - it200.com頁面引用組件
移步資源