Сохранение и загрузка изображения из localStorage

поэтому в основном, я пытаюсь сохранить изображение в 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 кнопка, которая будет обрабатывать все.

9
html5 javascript jquery local-storage

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);
};
21