如何加入base64编码的图片？

Question

我有这个问题，将 4 个 base64 编码图像聚合为一个。我正在使用节点 js 并收到包含我需要的信息的 JSON，我处理该信息然后在浏览器中显示图像，如下所示：

res.send(
 '<div style="display: inline-flex;">' +
  '<div>' +
    '<div><img src="' + panes.content + '"></div>' +
    '<div>' +
      '<div><img src="' + timeAxis.content + '"></div>' +
    '</div>' +
  '</div>' +
  '<div><img src="' + rightAxis.content + '"><img src="' + rhsStub.content + '"></div>' +
'</div>');

问题在于浏览器中显示的结果是 4 张图片... 我一直在寻找一种加入图像的方法，但我无法完成，已经尝试使用缓冲区和 canvas，但我无法在后端使用 canvas。有人知道如何解决这个问题吗？

更新：问题是我必须传递 4 个 img 标签，并在浏览器中创建 4 个图像，如下图所示，实际上是我设法将 4 个图像放在正确的位置。 with the above code, with the code given by rsp 我需要的是一种只能创建一个图像的方法，使用我从服务器接收到的 base64 编码图像，因为例如如果用户想要下载图像，它只能是一个图像而不是四个。

Answer 1

如果我对你的问题理解正确，你只需要图像相互接触且没有间隙？

也许这可以解决问题：

res.send(
 '<div>' +-
  '<img src="' + panes.content + '">' +
  '<img src="' + timeAxis.content + '"><br/>' +
  '<img src="' + rightAxis.content + '">' +
  '<img src="' + rhsStub.content + '">' +
 '</div>');

当然你没有展示任何图片示例所以我只能猜测。

这是你需要的吗？如果不是，我建议在其中一项服务上发布示例：

如果知道你所看到的和你想看到的，那么回答你的问题会容易得多。

更新

您更新了问题，所以我知道您希望图片可以一次性下载。您在这里有两个选择：

您可以在 Node 中解码 base64 图像并使用 gm, imagemagick 等方式连接图像，然后再次对其进行编码并在您的响应中使用它。
您可以在客户端加入图像，这对您的服务器来说会更容易且工作量更少。在客户端，您有一些图像，每个图像都有其宽度和高度。您可以添加创建具有该尺寸的新 canvas 所需的内容，使用 drawImage, convert the result to Base64-encoded data URL using toDataURL 复制图像并创建图像 src 设置为该数据 URL。最后一步是从 DOM 中删除原始图像和 canvas。如果您这样做，那么用户将只有一张图像可以保存。

另一种工作方式不同，就像上面的第 1 点一样，但是将图像保存在服务器上而不是 Base64 编码并将其 URL 放在 HTML 中。但在这种情况下，您需要在一段时间后清理保存的图像。

如何加入base64编码的图片？

How to join base64 encoded images?

html

javascript

base64

node.js

更新