前言

最近工作上碰到一个需求，需要在地图上用一种图标来表示一种点数据，每个图标由对应的3个要素构成，图标由3种属性控制，共2 * 5 * 2 = 20种，但是UI只给了 2 + 5 + 2 = 9 张切图。本来打算找UI切图，但是UI已经下班了，而且20张图片也挺多的，写到代码里比较臃肿，在网上搜了合并图片的方案，然后自己完善了一下，分享一下，也想问下大家是否有更好的解决方案。

代码

      /**
       *
       * @param {{url: string, x: number, y:number, w: number, h: number}[]} list 图片url即左上角位置及宽高
       * @param {number} width 结果宽度
       * @param {number} height 结果宽度
       * @returns {Promise<string>} base64字符串的Promise
       */
      function mergeImgs(list, width, height) {
        const canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext("2d");
        const pList = [];
        list.forEach((item) => {
          const img = new Image();
          img.crossOrigin = "Anonymous";
          img.src = item.url;
          const p = new Promise((resolve) => {
            img.addEventListener("load", () => {
              if (item.w && item.h) {
                ctx.drawImage(img, item.x, item.y, item.w, item.h);
              } else {
                ctx.drawImage(img, item.x, item.y);
              }
              resolve();
            });
            img.src = item.url;
          }, false);
          pList.push(p);
        });
        return new Promise((resolve) => {
          Promise.all(pList).then(() => {
            const base64 = canvas.toDataURL("image/png");
            resolve(base64);
          });
        });
      }