Question

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

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

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

<img id="bannerImg" src="images/image-placeholder.jpg" alt="Banner Image" style="display:none;" width="100%" height="200px" />

我在上面添加的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);
};

从localStorage保存和加载图像

1 个答案: