在本地存储中存储 .jpg 文件答案

【问题标题】：Storing .jpg files in local storage在本地存储中存储 .jpg 文件
【发布时间】：2012-03-31 19:27:52
【问题描述】：

我正在尝试找到一种方法将 .jpg 文件从我的网站存储到本地存储中，以提高网站速度。理论上很简单：将picture.jpg转换为base64字符串并与setitem一起存储到localstorage中。要再次显示图片，只需从本地存储加载 base64 字符串并解码回 jpg。但是，与往常一样，练习更加困难。我试图找到一种使用html5或javascript（没有php！）将.jpg文件即时转换为base64的方法。是否有人遇到同样的问题并能够找到解决方案并可以分享代码？

【问题讨论】：

我认为这不会提高速度。浏览器正在缓存图片并在 base64 中转换并返回不应该更快......
不是第一次，但是如果下次打开页面，所有“旧”图片都可以从本地存储加载，而不是从服务器再次加载。这会提高互联网连接速度较慢的移动设备的速度。
这可以通过 Canvas 轻松完成。请记住，localStorage 的大小不是无限的。您最好不要使用localStorage 来缓存许多（大）文件。
@Rob W：你有一个简短的代码示例吗？如何将网站上现有的 jpg 图片转换为画布并将它们存储到存储中？我知道本地存储限制为 5mb，但我希望这应该足够了。

标签： javascript image html base64 local-storage

【解决方案1】：

顺便说一句，localStorage is better than browser cache. Google 和 Bing 做了一些测试，试图看看哪种缓存方法更快，这里是results. SPOILER ALERT！！！！ localStorage 更好。

【讨论】：

【解决方案2】：

我也支持使用 HTML5 缓存清单，它也支持 离线案例，专为您的问题而设计。不要将本地存储与 base64 一起使用，因为：

Base64 编码增加文件大小to 137% (!)
该算法会减慢您的应用程序，因为不仅 Internet 速度限制了您的应用程序，而且 javascript 也无法像在台式计算机上那样快速执行。在我对手机的测试中，我遇到了常见 javascript 的问题，所以我会将 javascript 减少到最低限度，并且不需要你的上下文。
本地存储始终不受支持，并且也有限制！

对于缓存清单，您可以查看w3.org - Cache Manifests，也可以在html5 Rocks 上查看初学者指南。

如果你不想使用 HTML5 chache manifest，你应该尽量提高速度，在 stackoverflow 上的许多帖子中都有描述，我喜欢帖子 about increasing Math Object 中指向 the presentation 的链接

【讨论】：

我如何在谷歌上搜索“Zend Framework Validator 自定义错误 blablabla”并最终在这里了解 HTML 5 缓存清单！

【解决方案3】：

您可以在支持的情况下使用canvas 元素和toDataURL 方法。类似的东西：

var ctx = canvas.getContext("2d");

var img = new Image();

img.onload = function() {
   canvas.width = this.width;
   cavans.height = this.height;

   ctx.drawImage(this, 0, 0);

   var base64jpeg = canvas.toDataURL("image/jpeg");
}

img.src = "/images/myjpeg.jpg";

但是，如果您想这样做以“提高网站速度”，请使用 HTML5 清单进行缓存：它正是为此目的而设计的（当然还有离线应用程序）。

【讨论】：

附言。 var canvas = document.createElement('canvas');
嗯我刚刚测试了<script> var ctx = canvas.getContext("2d"); var img = new Image(); img.onload = function() { canvas.width = this.width; cavans.height = this.height; ctx.drawImage(this, 0, 0); var base64jpeg = canvas.toDataURL("image/jpeg"); } img.src = "http://ethisphere.com/wp-content/themes/ethisphere-2009/images/wme2008/google2.jpg"; </script> 但它对我不起作用，我试着做警报（base64jpeg）；或警报（img）；看看发生了什么，但我根本没有得到任何回报。
@user1271179 假设您的页面中已经有一个

【解决方案4】：

通过创建缓存清单来使用 HTML5 缓存可能会更好/更容易。

【讨论】：

嗯，也许，我会记住这个选项，但更喜欢 localstorage 方式能够允许用户存储单篇文章以供离线阅读或其他东西。