将图像存储在localStorage中是个好主意吗？

Question

我制作的HTML / Javascript工具可以处理图片。坦率地说，我只是使用HTML，因为Java或C ++ GUI太复杂而且不值得付出努力。

该工具只显示图像，然后在悬停图像时显示百分比和绝对坐标：

我的目标是为＆＃34;最后的图像＆＃34;创建一个小图形用户界面。允许快速显示最近的图像。由于该应用程序仅限客户端，因此我无法使用任何类型的服务器存储。有一个localStorage对象，但对我来说，在其中存储几MB图像似乎是一个坏主意。

你怎么看？我应该使用localStorage吗？还是有替代方案吗？或许服务器合作是完全必要的？

Answer 1

您可以使用压缩算法来压缩图像的base64字符串表示。我在我的代码中使用了类似的方法，它使我能够存储与正常情况相比更多的图像。

压缩lib：LZstring http://pieroxy.net/blog/pages/lz-string/index.html

Answer 2

它或使用 HTML5文件API ，但如果你只是保存一些5mb以下的图片HTML5 WebStorage就足够了，就像这样：

如果您使用网络存储空间，并HTML5 Canvas将图片转换为文字（数据uri）：

var img = new Image();
   img.src = "same_origin.png";

localStorage.setItem("lastImage",imgToURI(img));


function imgToURI(img){
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    context.drawImage(img,0,0);
    return canvas.toDataURL();
}

然后检索保存的图像：

var last = new Image();
  last.src = localStorage.getItem("lastImage1");

注意：大多数浏览器只允许5mb的本地存储。

注意：虽然localStorage受到高度支持，但{8}在IE8中不受支持。

---

注意： HTML文件API 方法不会对用户友好，截至目前，Chrome是唯一允许使用文件系统编写文件的方法api ，对于其他人，您必须将图像转换为数据uri，然后以数据uri文本文件的形式与所有数据建立链接，并让用户下载并重新加载它每一次。

希望它有所帮助！