一、图片加水印 `base64AddWaterMakerFace18(base64Img, wmConfig) { const _this = this return new Promise((resolve, reject) => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.crossOrigin = 'Anonymous'; //允许图片加载的过程出现跨域 let resultBase64 = null;
img.onload = async function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.font = `10px Georgia`;
ctx.fillStyle = '#999';
// 以左上角为坐标原点 开始绘制图像
ctx.drawImage(img, 0, 0, img.width, img.height);
ctx.fillText(wmConfig.textArrray[0], img.width * 0.05, img.height * 0.74)
ctx.fillText(wmConfig.textArrray[1], img.width * 0.05, img.height * 0.81)
ctx.fillText(wmConfig.textArrray[2], img.width * 0.05, img.height * 0.88)
ctx.fillText(wmConfig.textArrray[3], img.width * 0.05, img.height * 0.95)
resultBase64 = canvas.toDataURL('image/png');
if (!resultBase64) {
reject();
} else {
_this.image1 = resultBase64;
await _this.uploadToOSS2(resultBase64, 'final', '18', 3);
resolve(resultBase64);
}
};
img.src = base64Img;
})
},`