javascript - XMLHttpRequest:明确启用浏览器缓存(二进制数据)

前奏

我的Web应用程序(关键字:HTML，JavaScript，jQuery；必须在IE8 +，Chrome，FF中使用)必须显示来自某种WebCam的实时图像数据。该“WebCam”集成了一个网络服务器，该服务器以BMP的形式提供实时图像数据。

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

问题

我想在客户端分析图像数据。为此，我想使用XMLHttpRequest(使用this provided stackoverflow answer)预下载图像，然后再更新src标记的img属性。据我了解，浏览器随后应使用通过XMLHttpRequest下载的缓存图像数据。

问题在于，浏览器(IE8 +，FF和Chrome)向服务器发出了另一个请求，以再次下载图像(即，它不使用缓存的数据或数据没有首先缓存)。

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

附录

服务器发送的Cache-Control: max-age=5, public和Chrome其他的Cache-Control: no-store, max-age=5，并发送所有其他浏览器的304 Not Modified。

在 Chrome浏览器中，我可以通过发送src来处理第二个请求。浏览器将使用缓存的图像。在所有其他(提到的)浏览器中，这不起作用。

更新1

我知道，我可以使用Data URI Scheme来更新ojit_code属性。但是，这不适用于IE8(请参阅上面的要求)，因为IE8仅支持32KB(最大)大小。

最佳答案

我通过做以下明显的事情解决了这个问题:

通过隐藏的img(通过设置src)请求图像首先。这样，图像将被浏览器缓存。

之后再通过AJAX 请求图像二进制数据。由于浏览器随后会使用上述缓存的数据，因此我可以分析图像数据，而无需发出其他请求。

更新“可见”图像的src。

这样一来，我就可以实现所需的功能:通过先前的数据分析查看“实时”图像，而不必两次请求该图像。