javascript - 合并两个 dataURI 以创建单个图像

Question

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

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

Answer 1

您可以使用数据 uri 创建图像，然后使用 canvas 绘制包含它们的新图像。这是一个简单的例子:

var nloaded = 0;
function checkload(event) {
  nloaded++;
  if (nloaded < 2) {
    return;
  }
  
  var canvas = document.querySelector('canvas');
  var context = canvas.getContext('2d');
  context.drawImage(image1, 0, 0, 50, 50);
  context.drawImage(image2, 50, 50, 100, 100);

  var combined = new Image;
  combined.src = canvas.toDataURL('data/gif');
  
  document.body.appendChild(combined);
}

var image1 = new Image;
image1.onload = checkload;
image1.src = 'data:image/gif;base64,R0lGODdhAgACALMAAAAAAP///wAAAAAAAP8AAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAAgACAAAEAxBJFAA7';


var image2 = new Image;
image2.onload = checkload;
image2.src = 'data:image/gif;base64,R0lGODdhAgACALMAAAAAAP///wAAAAAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAAgACAAAEA5BIEgA7';

canvas {
    display: none;
}

<canvas width=100 height=100></canvas>

.

从数据 URI 加载图像并使用 Canvas 上下文的 drawImage 命令组合后，您可以使用 Canvas 创建新图像，如:

var combined = new Image;
combined.src = canvas.toDataURL('data/gif');

不幸的是，这在 IE8 中不起作用。