☰

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

tag-icon • tag-icon javascript jquery html local-storage
画像を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、画像を処理して保存するだけです。

ベストアンサー1

この問題を解決する必要のある方へ:

まず、 を使用して画像を取得し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;

さまざまなブラウザとバージョンでテストしましたが、非常にうまく動作するようです。

おすすめ記事