canvas 添加文字水印、图片水印并实现图片水印透明

先上效果图

1、图片添加文字

2、图片添加图片水印

1、图片添加文字水印

    async init() {
      let imgUrl =
        "http://qysmjczto.hn-bkt.clouddn.com/37c1ed77-f934-4bd9-bc50-c7160decab5c.png";
      const img = await this.loadImage(imgUrl);
      const canvas = document.createElement("canvas");
      const imgRatio = img.naturalWidth / img.naturalHeight;
      const ctxWidth = 400;
      const ctxHeight = ctxWidth / imgRatio;
      canvas.width = ctxWidth;
      canvas.height = ctxHeight;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, ctxWidth, ctxHeight);
      const res = await this.watermark(canvas, "wf_cs");
    },
    loadImage(src) {
      return new Promise((resolve, reject) => {
        let img = new Image();
        if (src.indexOf(src) === 0) {
          img.crossOrigin = "*"; // 处理跨域
        }
        img.src = src;
        img.onload = () => {
          resolve(img);
        };
        img.onerror = () => {
          reject(new Error("图片解析失败"));
        };
      });
    },
    watermark(canvas, text) {
      return new Promise((resolve, reject) => {
        let ctx = canvas.getContext("2d");
        ctx.font = "22px";
        ctx.fillStyle = "blue";
        ctx.textAlign = "right";
        ctx.fillText(text, canvas.width - 20, canvas.height - 30);
        // 多行文本 可自行抽离成方法
        // ctx.font = "12px 宋体";
        // ctx.fillStyle = "red";
        // ctx.textAlign = "right";
        // let date = new Date().getTime();
        // ctx.fillText(date, canvas.width - 20, canvas.height - 20);
        resolve(canvas.toDataURL("image/png", 1));
      });
    }

2、添加图片水印

1. 方法实现原理为canvas上进行图片的叠加
2. 因为需要水印透明，因此建议先生成水印再生成地图，避免把底图也透明了
3. 考虑到水印一般会出现多个，因此抽离出addImageWatermark方法，该方法控制水印的位置大小等，实际开发请根据图片的大小自行计算传入的x y值

    async init() {
     const img = await this.loadImage(require("../../assets/canvas.png"));
     const img2 = await this.loadImage(require("../../assets/test.png"));
     const canvas = document.createElement("canvas");
     const imgRatio = img2.naturalWidth / img2.naturalHeight;
     const ctxWidth = 400;
     const ctxHeight = ctxWidth / imgRatio;
     canvas.width = ctxWidth;
     canvas.height = ctxHeight;
     const ctx = canvas.getContext("2d");
     for (var i = 0; i < 5; i++) {
       this.addImageWatermark(ctx, img, 40 * (i + 1) + 5, 80, 40, 40);
     }
     await this.watermark(canvas, "这是文字水印");
     ctx.drawImage(img2, 0, 0, ctxWidth, ctxHeight);
     this.newImage = canvas.toDataURL("image/jpg", 1);
   },
    /**
    * @param{ctx} canvas创建的画布环境
    * @param{img} loadImage方法返回的图片
    * @param{x} 水印绘画的x轴位置
    * @param{y} 水印绘画的y轴位置
    * @param{width} 水印宽度
    * @param{height} 水印高度
    */
   async addImageWatermark(ctx, img, x, y, width, height) {
     ctx.drawImage(img, x, y, width, height);
     let imgData = ctx.getImageData(x, y, width, height);
     for (var i = 0, len = imgData.data.length; i < len; i += 4) {
       imgData.data[i + 3] = imgData.data[i + 3] * 0.1;
     }
     ctx.putImageData(imgData, x, y);
   },
   loadImage(src) {
     return new Promise((resolve, reject) => {
       let img = new Image();
       if (src.indexOf(src) === 0) {
         img.crossOrigin = "*";
       }
       img.src = src;
       img.onload = () => {
         resolve(img);
       };
       img.onerror = () => {
         reject(new Error("图片解析失败"));
       };
     });
   },
   watermark(canvas, text) {
     return new Promise((resolve, reject) => {
       let ctx = canvas.getContext("2d");
       ctx.font = "22px";
       ctx.fillStyle = "blue";
       ctx.textAlign = "right";
       ctx.fillText(text, canvas.width - 20, canvas.height - 30);
       ctx.font = "12px 宋体";
       ctx.fillStyle = "red";
       ctx.textAlign = "right";
       let date = new Date().getTime();
       ctx.fillText(date, canvas.width - 20, canvas.height - 20);
       resolve(canvas.toDataURL("image/png", 1));
     });
   }