从localStorage保存和加载图像

所以基本上，我试图将图像保存到localStorage ，然后在下一页上加载相同的图像。

我遇到了这个很好的例子： http ： //jsfiddle.net/8V9w6/

虽然，我完全不知道它是如何工作的，因为我只使用localStorage来处理非常小的字符串。

我有一个图像，通过jQuery处理的文件上传得到改变

我上面添加的jsfiddle链接允许多个文件上传，这绝对是我不想拥有的。

我需要知道的是我应该在第一页上放置什么来保存图像，以及我应该在第二页上放置什么来加载图像？

我有一个save按钮，可以处理所有内容。

Answer 1

像这样的东西？

 var img = new Image(); img.src = 'mypicture.png'; img.load = function() { var canvas = document.createElement('canvas'); document.body.appendChild(canvas); var context = canvas.getContext('2d'); context.drawImage(img, 0, 0); var data = context.getImageData(x, y, img.width, img.height).data; localStorage.setItem('image', data); // save image data }; 

在第二页上获取localStorage; 尝试这样的事情：

 window.onload = function() { var picture = localStorage.getItem('image'); var image = document.createElement('img'); image.src = picture; document.body.appendChild(image); };