Javascript 合并两个DataURI以创建单个映像

我想生成由标签和图标组成的图像。标签部分将变化很大（50-100），而大约有10个图标。我想通过将最终图像分为两部分，一个标签图像和一个图标图像，以模块化的方式制作最终图像。我将构建一个服务，返回标签的dataURI，而图标dataURI将嵌入页面中。然后我想结合这两个不同的dataURI来创建一个表示组合图像的dataURI

---

如何在客户端执行此操作？

您可以使用数据URI创建图像，然后使用画布绘制包含这些图像的新图像。下面是一个简单的例子：

var nloaded=0；
函数检查加载（事件）{
nloaded++；
如果（nloaded<2）{
返回；
}
var canvas=document.querySelector（'canvas'）；
var context=canvas.getContext（'2d'）；
drawImage（图像1,0,0,50,50）；
drawImage（图像2、50、50、100、100）；
var组合=新图像；
combined.src=canvas.toDataURL（'data/gif'）；
document.body.appendChild（合并）；
}
var image1=新图像；
图1.onload=检查负载；
image1.src='数据：image/gif；base64，r0lgoddhagaalmaaaaaap///waaaaaaap8aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
var image2=新图像；
图2.onload=检查负载；
image2.src='数据：image/gif；base64，r0lgoddhagaalmaaaaaap///waaaaaaaaap8aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
画布{
显示：无；
}
使用包含URI src和x，y偏移量的图像对象数组的示例：

var images = [
   { src: 'data:image/gif;base64,R0lGODdhAgACALMAAAAAAP///wAAAAAAAP8AAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAAgACAAAEAxBJFAA7', x: 0, y: 0 },
   { src: 'data:image/gif;base64,R0lGODdhAgACALMAAAAAAP///wAAAAAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAAgACAAAEA5BIEgA7', x: 20, y: 20 },
];

var canvas = document.createElement('canvas');
var destination = document.getElementById('canvas');

Promise.all(images.map(imageObj => add2canvas(canvas, imageObj)))
    .then(() => destination.append(canvas));

function add2canvas(canvas, imageObj) {
   return new Promise( (resolve, reject) => {
      if (!imageObj || typeof imageObj != 'object') return reject();
      var image = new Image();
      image.onload = function () {
          canvas.getContext('2d')
                .drawImage(this, imageObj.x || 0, imageObj.y || 0);
          resolve();
      };

      image.src = imageObj.src;
   });
}

更多的钟声/口哨声。。。函数生成复合png：

  function mergeImageURIs(images) {
      return new Promise( (resolve, reject) => {
          var canvas = document.createElement('canvas');
          canvas.width = 1000; // desired width of merged images
          canvas.height = 1000; // desired height of merged images
          Promise.all(images.map(imageObj => add2canvas(canvas, imageObj))).then(() => resolve(canvas.toDataURL('image/png'), reject));
      });
  }

  function add2canvas(canvas, imageObj) {
    return new Promise( (resolve, reject) => {
       if (!imageObj || typeof imageObj != 'object') return reject();
       var x = imageObj.x && canvas.width ? (imageObj.x >=0 ? imageObj.x : canvas.width + imageObj.x) : 0;
       var y = imageObj.y && canvas.height ? (imageObj.y >=0 ? imageObj.y : canvas.height + imageObj.y) : 0;
       var image = new Image();
       image.onload = function () {
           canvas.getContext('2d').drawImage(this, x, y);
           resolve();
       };

       image.src = imageObj.src;
    });
  }

不能只合并数据URI。您需要将它们作为实际图像打开，然后使用扩展来合并它们，