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个图像的结果...... 我一直在寻找一种方法来加入图像，但我无法完成它，已经尝试过缓冲区和画布，但我无法在后端使用画布。任何人都知道如何解决这个问题？

更新：问题是我必须传递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等内容加入图像，然后再次对其进行编码并在响应中使用它。
您可以在客户端加入图像，这样可以更轻松，更少地为您的服务器工作。在客户端，你有一些图像，每个图像的宽度和高度。您可以添加创建具有该维度的新画布所需的内容，使用drawImage将图像复制到那里，使用toDataURL将结果转换为Base64编码的数据URL，并使用{{1}创建图像设置为该数据URL。最后一步是从DOM中删除原始图像和画布。如果你这样做，那么用户只有一张图像可以保存。

您可以采用不同方式执行此操作的另一种方法，如上面的第1点，但将图像保存在服务器上而不是Base64编码并将其URL放在HTML中。但在这种情况下，您需要在一段时间后清理保存的图像。

如何加入base64编码图像？

1 个答案:

更新