web-dev-qa-db-ja.com

localStorageに画像を保存して次のページに表示するにはどうすればいいですか？

したがって、基本的には、1つの画像をアップロードし、それをlocalStorageに保存してから、次のページに表示する必要があります。

現在、HTMLファイルをアップロードしています。

<input type='file' id="uploadBannerImage" onchange="readURL(this);" />

この機能を使用してページに画像を表示します。

function readURL(input) 
{
    document.getElementById("bannerImg").style.display = "block";

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('bannerImg').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

画像はページ上に即座に表示され、ユーザーに表示されます。その後、フォームの残りの部分に記入するように求められます。この部分は完璧に機能しています。

フォームが完成したら、「保存」ボタンを押します。このボタンを押すと、すべてのフォーム入力をlocalStorageという文字列として保存します。画像をlocalStorage項目として保存する方法も必要です。

保存ボタンをクリックすると、それらも新しいページに移動します。この新しいページでは、画像が上部に表示された状態で、ユーザーデータが表形式で表示されます。

わかりやすく簡単なので、[保存]ボタンを押してから画像をlocalStorageに保存し、次のページでlocalStorageから画像を借りる必要があります。

このフィドル や moz：// a HACKSのこの記事 のような解決策を見つけました。

私はまだこれがどのように機能するかについて非常に混乱していますが、私は本当に簡単な解決策が必要なだけです。基本的に、 'Save'ボタンが押されたらgetElementByIDで画像を見つけ、それから画像を処理して保存するだけです。

javascriptjqueryhtmlhtml5local-storage
126
Fizzix

この問題を解決したいと思う人は誰でも：

まず、getElementByIDで画像を取得し、その画像をBase64として保存します。それから、Base64文字列をlocalStorage値として保存します。

bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);

これは画像をBase64文字列に変換する関数です。

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

それから、私の次のページで、私は次のように空白のsrcで画像を作成しました：

<img src="" id="tableBanner" />

そして、ページがロードされるとすぐに、次の3行を使用してlocalStorageからBase64文字列を取得し、作成したsrcを空白にして画像に適用します。

var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;

かなりの数のブラウザとバージョンでそれをテストしました、そしてそれはかなりうまくいくようです。

176
Fizzix

私はlocalStorageに画像を保存するための小さな2,2kbのライブラリを書きました JQueryImageCaching 使い方：

<img data-src="path/to/image">
<script>
    $('img').imageCaching();
</script>
9
moledet

画像をデータURIにシリアル化できます。この中にチュートリアルがあります ブログ記事 。これでローカルストレージに保存できる文字列が生成されます。次に、次のページで、データのURIをイメージのソースとして使用します。

6
Ray Wadkins

「最初に画像を完全にロードする必要があることに注意してください（そうでなければ空の画像を持つことになってしまいます）。場合によっては、処理を次のようにラップする必要があります。遊戯11年1月1日13時04分 "

これは非常に重要です。今日の午後に検討しているオプションの1つは、addEventListenerの代わりにjavascriptコールバックメソッドを使うことです。ページを更新することなくページをロードする前にすべての要素を準備することが重要です。

誰かがこれを拡張することができるならばしてください - 同様に、あなたは望ましい結果を得るためにsettimeout、wait、callback、またはaddEventListenerメソッドを使いましたか。どれとなぜ？

0
Andrew Ellison Pembroke

私は同じ問題を思いついた、画像を保存する代わりに、最終的にローカルストレージをオーバーフローさせる、あなたはただ画像へのパスを保存することができる。何かのようなもの：

let imagen = ev.target.getAttribute('src');
arrayImagenes.Push(imagen);
0
SebasCiB3R