uniapp小程序上传图片添加水印

上传图片时，使用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);
	}
};

 

源码地址：源码