画像を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。

私は、次のようないくつかの解決策を見つけ、このフィドルと// HACKS：MOZで、この記事。

これがどのように機能するかについてはまだ非常に混乱していますが、本当に必要なのは単純なソリューションだけです。基本的にはgetElementByID、[保存]ボタンを押して画像を検索し、画像を処理して保存するだけです。

この問題を解決する必要がある人にも：

まず、で画像を取得し、画像をgetElementByIDBase64として保存します。次に、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行を使用してからBase64文字列を取得し、作成localStorageした空白srcを含む画像に適用します。

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

かなり多くの異なるブラウザとバージョンでテストしましたが、かなりうまく機能しているようです。

localStorage JQueryImageCachingに画像を保存するための2,2kbの小さなライブラリを作成しました 。

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

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

「最初に画像を完全に読み込む必要があることに注意してください（そうしないと、画像が空になる）、場合によっては、処理を次のようにラップする必要があります：bannerImage.addEventListener（ "load"、function（）{}）; –ユガ17年11月1日13:04 "

これは非常に重要です。今日の午後を探索するオプションの1つは、addEventListenersではなくjavascriptコールバックメソッドを使用することです。これも正しくバインドされていないようです。ページを更新せずにページをロードする前にすべての要素を準備することが重要です。

誰かがこれを拡張できる場合は、そうしてください-同様に、settimeout、待機、コールバック、またはaddEventListenerメソッドを使用して、目的の結果を取得しましたか？どれがなぜですか？

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

let imagen = ev.target.getAttribute('src');
arrayImagenes.push(imagen);