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

Question

前奏

我的网络应用程序（关键字：HTML，JavaScript，jQuery; 必须在中工作：IE8 +，Chrome，FF）必须提供一种实时图像数据-of-摄像头。这个“WebCam”集成了一个网络服务器，提供实时图像数据BMP。

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

问题

我想分析客户端的图像数据。为此，我想使用XMLHttpRequest（使用this provided stackoverflow answer）预先下载图片，然后更新src标记的img属性。我的理解是，浏览器应该然后使用通过XMLHttpRequest下载的缓存图像数据。

问题是，浏览器（IE8 +，FF和Chrome）向服务器发出另一个请求以再次下载图像（即它不使用缓存数据，或者数据首先没有缓存）。 / p>

如何启用浏览器来缓存数据并使用它而不是发出其他请求？

附录

服务器为 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。

Answer 1

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

1. 通过隐藏img（设置src）优先请求图片。这样，图像就会被浏览器缓存。

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

3. 更新“可见”图片的src。

通过这种方式，我实现了我的目标：使用先前的数据分析查看“实时”图像，而不必请求图像两次。