从 localStorage 保存和加载图像

IT技术 javascript jquery html local-storage
2021-03-15 05:19:12

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

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

虽然,我完全不知道这是如何工作的,因为我只将 localStorage 用于极小的字符串。

我有一个通过 jQuery 处理的文件上传更改的图像

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

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

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

我有一个save按钮可以处理所有事情。

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);
};
太好了,演示完美运行!稍后我会尝试在我的网站上实施它,我会让你知道它是怎么回事。谢谢!:)
2021-05-07 05:19:12
x 和 y 是什么?
2021-05-11 05:19:12
那么我会在下一页放置什么来加载图像?
2021-05-13 05:19:12
x(x 位置)/y(y 位置)
2021-05-15 05:19:12