Question

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

Answer 1

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

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

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

如果你不想使用HTML5 chache manifest，你应该尝试尽可能地提高速度，在stackoverflow上的很多帖子中有描述，我喜欢帖子中the presentation的链接{{3 }}

Answer 2

您可以在支持的地方使用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清单进行缓存：它的设计完全是为了这个目的（当然还有离线应用）。

Answer 3

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

Answer 4

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

将.jpg文件存储在本地存储中

4 个答案: