前端实现多张图片层叠拼接（海报）

因业务需求，后端返回二维码和中间logo图地址，前端上传海报背景实现海报拼装并下载

/**
 * 多张图片层叠拼接
 * @param {Array} imgList 例: [{url:图片地址,width:画图长度尺寸,height:画图高度尺寸,x:横向定位,y:纵向定位},{...}]
 * @param {Object} otherInfo 与最后base64数据组装对象统一返回 {url: base64, ...otherInfo}
*/
function drawPoster(imgList, otherInfo) {
  const drawImg = (resolve, imgList, otherInfo, oldContext, oldCanvas) => {
    const { url = '', width = 280 * 4, height = 496 * 4, x = 0, y = 0 } = imgList[0];
    const image = new Image();
    // 解决跨域问题
    image.setAttribute('crossOrigin', 'anonymous');
    image.onload = () => {
      if (oldContext && oldCanvas) {
        oldContext.drawImage(image, x, y, width, height);
        imgList.shift();
        if (imgList.length) {
          drawImg(resolve, imgList, otherInfo, oldContext, oldCanvas);
        } else {
          resolve({ url: oldCanvas.toDataURL('image/png'), ...otherInfo });
        }
      } else {
        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        const context = canvas.getContext('2d');
        context.drawImage(image, x, y, width, height);
        imgList.shift();
        if (imgList.length) {
          drawImg(resolve, imgList, otherInfo, context, canvas);
        } else {
          resolve({ url: canvas.toDataURL('image/png'), ...otherInfo });
        }
      }
    };

    image.src = url + (url.indexOf('?') > -1 ? '&time=' : '?time=') + new Date().valueOf(); //加时间戳防止图片缓存报跨域问题
  };

  return new Promise((resolve, reject) => drawImg(resolve, imgList, otherInfo));
}