[解決済み] 画像を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 .

しかし、私はまだこれがどのように機能するかについて非常に混乱しており、私は本当に単純な解決策を必要としているだけです。基本的に、私はただ画像を見つけるために getElementByID 保存」ボタンが押されたら、画像を加工して保存してください。

どのように解決するのですか？

この問題を解決する必要がある人へ。

まず、画像を 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行を使って、Base64文字列を localStorage を、画像に適用し、空白の src 作成しました。

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

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