[英]Saving and loading an image from localStorage
So basically, I am trying to save an image into localStorage
, and then load that same image on the next page. 所以基本上,我试图将图像保存到localStorage
,然后在下一页上加载相同的图像。
I came across this great example: http://jsfiddle.net/8V9w6/ 我遇到了这个很好的例子: http : //jsfiddle.net/8V9w6/
Although, I have absolutely no idea how this works since I have only ever used localStorage for extremely small strings. 虽然,我完全不知道它是如何工作的,因为我只使用localStorage来处理非常小的字符串。
I have an image that gets changed via a file upload handled by jQuery 我有一个图像,通过jQuery处理的文件上传得到改变
<img id="bannerImg" src="images/image-placeholder.jpg" alt="Banner Image" style="display:none;" width="100%" height="200px" />
The jsfiddle
link I added above allows multiple file upload, and that is definitely something I would not like to have. 我上面添加的jsfiddle
链接允许多个文件上传,这绝对是我不想拥有的。
What I need to know is what should I be placing on the first page to save the image, and what should I be placing on the second page to load the image? 我需要知道的是我应该在第一页上放置什么来保存图像,以及我应该在第二页上放置什么来加载图像?
I have a save
button that will be processing everything. 我有一个save
按钮,将处理一切。
Something like this ? 像这样的东西?
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
};
Get the localStorage on the second page; 在第二页上获取localStorage; try something like this: 尝试这样的事情:
window.onload = function() {
var picture = localStorage.getItem('image');
var image = document.createElement('img');
image.src = picture;
document.body.appendChild(image);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.