在IE 6和7中使用图像的数据URI

Question

我目前正在开发一个网络应用程序。它包含在服务器中动态生成的图像（因此需要一些时间才能在请求后出现），然后抛出。所以我认为我将使用HTML5 local-storage API来缓存图像，以便在对同一图像的后续请求中，它可以立即提供。对于tha，我计划使用图像的base64编码作为源，而不是使用源URL。

JS现在将首先检查本地存储中当前是否可以使用该图像数据（而不是从服务器请求图像）（例如，具有属性123的图像存储在本地存储中以 123 为键，以及64位编码作为值）。如果是，那么只需使用从那里获得的值更改图像的来源。否则请求服务器发送编码，一旦接收到，就将其存储在缓存中。

问题是IE6而IE7不支持。有一个解决方法，如here所述，但它涉及服务器端CSS文件以包含图像数据。由于图像将在运行中生成，因此不符合我们的目的。我还能在IE6和IE7中实现这一目标吗？

Answer 1

或者，不要尝试缓存任何客户端。在服务器端缓存生成的图像并像平常一样托管这些图像。您不需要localstorage并将其缓存到客户端。

换句话说：

1. 使用您的脚本生成图像服务器端
2. 将其缓存到/httpdocs/cache/images/whatever-hash.jpg
之类的地方
3. 在文档<img src="/cache/images/whatever-hash.jpg">
中投放图片

如果生成图像需要5秒钟，并且您有120个并发用户请求100个唯一页面，并且您的服务器脚本只能在任何给定时间处理4个线程 服务器处理时间为5秒x（120/4）/ 60 = 2.5分钟，然后提供队列映像中的最后一个用户，并将数据存储在localstorage中。

如果所有用户都请求相同的页面，则花费的时间相同。每个用户的缓存没有真正的好处，因为每个用户都必须要求服务器生成他们自己的图像。此外，由于本地存储通常会失效，用户越多，他们就会觉得用户体验过于缓慢，而且我认为你的应用会保释。

在服务器上缓存文件将有更多的好处恕我直言。当然它占用了服务器存储空间，但现在它相当便宜，你可以得到一个云CDN（例如www.maxcdn.com）来对抗负载。

如果您仍然决定需要缓存客户端，因为IE6 / IE7不支持localstorage或数据URI，请查看以下内容

• 您需要一个适用于IE6 / IE7的Web存储垫片https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
的列表
• 您需要一种方法将生成的图像暂时存储为blob并将其粘贴到存储中。示例：http://robnyman.github.com/html5demos/localstorage/
• 你也可以使用Canvas Shim和toBlob垫片：https://github.com/eligrey/canvas-toBlob.js/

Answer 2

设置标头以通知浏览器资源已缓存：

header("Last-Modified: " . date("D, d M Y H:i:s", getlastmod()));

PHP中的

或

Response.Cache.SetLastModified(DateTime.Now);

<。>在.net

这样浏览器就会缓存资源。