图片加水印及合并图片

146 阅读1分钟

一、图片加水印 `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;
})

},`