9

基本的に、画像を に保存し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上に追加したリンクは、複数のファイルのアップロードを可能にしますが、これは絶対に望んでいないことです。

私が知る必要があるのは、画像を保存するために最初のページに何を配置する必要があり、画像をロードするために 2 番目のページに何を配置する必要があるかということです。

すべてを処理するsaveボタンがあります。

4

1 に答える 1

21

このようなもの ？

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

2 ページ目で localStorage を取得します。このようなことを試してください：

window.onload = function() {
 var picture = localStorage.getItem('image');
 var image = document.createElement('img');
 image.src = picture;
 document.body.appendChild(image);
};
于 2013-10-03T12:20:30.050 に答える