使用canvas将多图合成一张图片方法及问题解决

本篇主要记录使用使用canvas将多图合成一张图片的方法及遇见的几个坑。

实现代码及思路

// 把多张图拼接成一张
  canvasDrawImage(imgData, obj) {
    let self = this;    
    let width = 50;
    let height = 50;
    // 获取最大的宽度和所有的高度
    imgData.forEach(img => {
      width = img.w > width ? img.w : width;
      height = height + img.h;
    })

    // 初始化canvas 
    let canvas = document.createElement('canvas');
    let context = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;

    // 绘制矩形添加白色背景色
    context.rect(0, 0, width, height);
    context.fillStyle = "#fff";
    context.fill();
    
    // 多图绘制，下一张的y应该是上一张的高度
    let beforeHeight = 0;
    let p = [];
    imgData.forEach(img => {
      if (img.imageUrl) {
        // 因为图片加载会有延迟，因此使用promise 保证合并图片的正确性
        let p1 = new Promise(resolve => {
          let imgUpload = new Image();
          // 防止跨域
          imgUpload.setAttribute('crossOrigin', 'anonymous');
          imgUpload.src = img.imageUrl.indexOf('?') > -1 ?  img.imageUrl + '&v=' + Math.random() : img.imageUrl + '?v=' + Math.random();   
          imgUpload.onload = function () {
            context.drawImage(imgUpload, 0, beforeHeight, img.w, img.h);
            beforeHeight = beforeHeight + img.h;
            resolve(true)
          }
        });
        p.push(p1);
      }
    });

    Promise.all(p).then(res => {
      try {
        let img = new Image();
        img.setAttribute('crossOrigin', 'anonymous');
        let src = canvas.toDataURL("image/png");
        console.log(src)
        // to do something...

      } catch (e) {
        self.mergeLoading = false;
        self.mergeSuccess(obj);
        console.log(e)
      }
    })
  }

遇到的坑的说明

1. context.drawImage(imgUpload, 0, beforeHeight, img.w, img.h);这里的第一个参数是图片，可以是img的 dom 元素，不是图片的地址，必须是图片加载后才可以~

2、使用过程中报错context的方法有问题，这里需要在图片后面加个后缀
imgUpload.src = img.imageUrl.indexOf('?') > -1 ? img.imageUrl + '&v=' + Math.random() : img.imageUrl + '?v=' + Math.random();

3、canvas.toDataURL("image/png")，第一个参数要填写！此外如果返回的是data;空数据，那么要注意看下是不是canvas的高度没设置好！