wxml
<canvas class="canvas" canvas-id="watermarkCanvas"></canvas>
<view class="watermark" style='background-image: url({{backgroundImg}});'></view>
wxss
.watermark{
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
pointer-events: none;
background-repeat: repeat;
}
.canvas{
width: 200px;
height: 200px;
position: fixed;
left: -200%;
}
JS
Page({
data:{
backgroundImg: ''
},
onLoad(){
this.waterRemark()
},
transToBase64({ url, type = 'png' }) {
return new Promise((resolve, reject) => {
wx.getFileSystemManager().readFile({
filePath: url,
encoding: 'base64',
success: res => {
// console.log(res)
resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
},
fail: res => reject(res.errMsg)
})
})
},
waterRemark(drawTitle='yangkeego', drawTime='2020-10-10:17:30:15') {
const ctx = wx.createCanvasContext('watermarkCanvas')
ctx.rotate(10 * Math.PI / 180)
ctx.setFontSize(10)
ctx.setFillStyle('rgba(188,188,188,0.3)')
ctx.fillText(`水印标题:${drawTitle}`, 20, 10)
ctx.setFontSize(10)
ctx.setFillStyle('rgba(188,188,188,0.3)')
ctx.fillText(drawTime, 10, 25)
ctx.draw()
setTimeout(() => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 130,
height: 90,
canvasId: 'watermarkCanvas',
success: (res) => {
var fileManager = wx.getFileSystemManager();
fileManager.saveFile({
tempFilePath: res.tempFilePath,
success: res => {
this.transToBase64({ url: res.savedFilePath }).then(res2 => {
this.setData({ backgroundImg: res2 })
wx.setStorageSync('watermark', res2)
})
}
})
}
});
});
},
})
/*
这里忽略
getNowTime(){
let loginTime = new Date()
let year = loginTime.getFullYear()
let month = loginTime.getMonth() + 1 > 10 ? loginTime.getMonth() + 1 : `0${loginTime.getMonth() + 1}`
let date = loginTime.getDate()>10?loginTime.getDate():'0'+loginTime.getDate()
let hour = loginTime.getHours()
let minutes = loginTime.getMinutes()
let seconds = loginTime.getSeconds()
let nowTime = `${year}年${month}月${date}日 ${hour}时${minutes}分${seconds}秒`
wx.setStorageSync('nowTime', nowTime);
},
*/