5

序幕

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

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

问题

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

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

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

附录

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

在Chrome中，我可以通过发送一个304 Not Modified. 浏览器将使用缓存的图像。在所有其他（提到的）浏览器中，这不起作用。

更新 1

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

4

1 回答 1

3

我通过做显而易见的事情解决了这个问题：

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

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

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

这样我就实现了我所需要的：通过事先数据分析查看“实时”图像，而无需两次请求图像。

于 2013-11-07T07:32:45.467 回答