XMLHttpRequest: 显式启用浏览器缓存（二进制数据）

Question

前言

我的Web应用程序（关键词：HTML，JavaScript，jQuery; 必须支持的浏览器：IE8+，Chrome，FF）需要展示来自一种“WebCam”的实时图像数据。这个“WebCam”集成了一个Web服务器，提供实时图像数据作为BMP。

图像数据通过设置img标记的src属性进行“下载”。

问题

我想在客户端分析图像数据。为此，我希望使用XMLHttpRequest预先下载图像（使用提供的stackoverflow答案），然后更新img标记的src属性。我理解浏览器应该使用通过XMLHttpRequest下载的缓存图像数据。

问题是，浏览器（IE8 +，FF和Chrome）会发出另一个请求以重新下载图像（即它不使用缓存数据或者数据一开始就没有被缓存）。

如何使浏览器缓存数据并使用它而不是发出另一个请求？

附录

服务器为Chrome发送Cache-Control：max-age = 5，public，并为所有其他浏览器发送Cache-Control：no-store，max-age = 5。

在Chrome中，我可以通过发送304 Not Modified来处理第二个请求。然后浏览器将使用缓存的图像。但是在所有其他（提到的）浏览器中，这种方法不起作用。

---

更新1

我知道，我可以使用Data URI Scheme来更新src属性。然而，这对于IE8不起作用（请参见上面的要求），因为IE8仅支持最大32KB。

- SamuelTee

---

我相信你可以使用HTML5技术直接绘制图像，而不是通过<img src="...插入它，这样你就不必担心缓存的问题了。 - Daniel W.

@DanFromGermany：感谢您的建议。由于我必须支持IE8，HTML5在这里不是一个选项。顺便说一下，即使使用HTML5也无法解决缓存问题。 - SamuelTee

Answer 1

我通过一些显而易见的方法解决了这个问题：

1. 首先通过隐藏的标签请求图像（设置src），这样可以让浏览器缓存该图片。

2. 然后通过AJAX请求图像二进制数据。由于浏览器使用了上述缓存数据，我可以分析图像数据而不需要发出另一个请求。

3. 更新"可见"图片的src属性。

这样我就能够实现我所需的功能：在进行先期数据分析的同时查看"实时"图像，而不必再次请求图像。

- SamuelTee