使用一个请求/响应下载多个 PNG（nodejs）答案

【问题标题】：Download multiple PNGs with one request/response (nodejs)使用一个请求/响应下载多个 PNG（nodejs）
【发布时间】：2013-10-11 10:18:29
【问题描述】：

我有一个具体问题：

我有一个请求，发送到 nodejs express 应用程序，该应用程序将返回多个 PNG。结果直接显示在浏览器中的图像中。

image.src = http://www.....

PNG 是在服务器端创建的，但我无法在一个响应中将它们发回并在浏览器中以图像的形式在客户端显示。

我将 PNG 内容通过管道传输到一个流中，然后将其发回。当所有文件都发回时，我在最后关闭了流。我没有在两者之间调用 res.end()。

我收到一个 PNG 文件，非常大（所以我知道它包含我请求的所有图像的数据），但我在浏览器中的图像只显示第一个 PNG - 我不知道如何拆分响应客户端查看我的所有图像。

如果我直接将它们下载到我的电脑上（通过手动调用请求），我什至无法查看它们 - 返回的 PNG 非常大，但仅在我打开它时才显示第一个 PNG，例如在 gwenview 中。

无法在 zip 文件中发送 png 文件并在客户端解压，因为并非所有浏览器都支持解压缩。（我很难学会这个）我真的不知道如何解决这个问题。我是否需要设置一个我还不知道的特定标题类型？我需要在 PNG 之间发送一些分隔符吗？如何拆分返回的 PNG 客户端？

非常感谢您的帮助！

谢谢！

【问题讨论】：

您正在尝试将许多较小的图像组合成一张巨大的图像，并希望浏览器自动显示较小的图像？如果是这样，那就行不通了。您可以查看 CSS sprite 技术来显示较大图像的区域。但是，它不会将多个文件的内容流式传输到一起。它正在构建一个大图像。
还有什么软件不能改？
为什么必须在一个请求中完成？多个请求可以轻松解决问题。
它必须是一个请求，这就是我无法在软件中进行大量更改的意思——抱歉，我措辞不准确。我真的不希望浏览器自动检测较小的图像，我只是不知道如何检测它们。如何再次将客户端的图像拆分为较小的图像？我的意思是必须有解决方案？这就是为什么我要问定界符......我不知何故觉得“大图像”是通过一个接一个地流式传输图像而错误地创建的 - 即使通过手动下载大图像（而不是使用 js）只有第一个图像是显示

【解决方案1】：

多张图片没有 MIME 类型。最好的办法是生成一个 html 页面，然后将图像嵌入其中。如果您不想在服务器上保留任何图像，可以使用数据 URL 嵌入它们：https://github.com/heldr/datauri

【讨论】：

数据 URI 不是解决方案 - 在 IE 中，显示的图像有 32kb 的限制，这还不够……而且我只有一个请求，就像我在上面写的那样，我无法更改
只有IE8有这个限制，IE8的市场份额很小而且还在下降。
因为 IE8 对我来说很重要，所以这不是解决方案，抱歉 - 但谢谢。
您似乎对问题进行了如此严格的限制，以至于解决方案集为空。我建议使用 data-uri 方法，然后为 IE8 提供备用方案，例如显示单个组合图像或仅发送第一张图像或发送图像的 zip 文件。
我尝试使用节点 gm 附加图像，但图像始终为空。此外，我认为不可能再次如此轻松地拆分图像以单独显示它们。我想我会放弃。

【解决方案2】：

另一种选择是使用node-canvas 将多个图像组合成一个大图像。

【讨论】：