上传图片时,使用canvas给选择的图片添加水印;
效果:
主要代码:
const canvas = wx.createOffscreenCanvas({
type: '2d',
width: w,
height: h,
compInst: this
});
const context = canvas.getContext('2d');
const image = canvas.createImage();
await new Promise(resolve => {
image.onload = resolve
image.src = img
});
context.clearRect(0, 0, w, h);
context.drawImage(image, 0, 0, w, h);
context.translate(w / 2, h / 2);
context.rotate(-30 * Math.PI / 180);
let horizontal = w / 6;
let vertical = h / 3;
let fonsize = w / 30;
for (let i = 0; i <= 8; i++) {
for (let j = 0; j <= 6; j++) {
context.beginPath();
context.font = `${fonsize}px serif`;
context.fillStyle = '#000000';
context.fillText('不重要的水印', (i * horizontal - w / 2) * 2, j * vertical - h, fonsize * 30);
}
};
源码地址:源码