ウェブサイト検索

javascript - 画像を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行を使ってlocalStorageからBase64文字列を取得し、作成した空のsrcを持つ画像に適用します:

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

いくつかの異なるブラウザやバージョンでテストしましたが、かなりうまく動作するようです。

回答 #2

私はローカルストレージに画像を保存する2.2KBの小さなライブラリ JQueryImageCaching を書きました 使用法:

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

回答 #3

こちらは、ここでの答えを組み合わせたもので、FileReaderオブジェクトも使用しています。

まず、アップロードされた画像を FileReader オブジェクトを使って Base64 文字列として保存します:

// get user's uploaded image
const imgPath = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();

reader.addEventListener("load", function () {
    // convert image file to base64 string and save to localStorage
    localStorage.setItem("image", reader.result);
}, false);

if (imgPath) {
    reader.readAsDataURL(imgPath);
}

それから、localStorage から画像を読み込むには、次のことを行います:

let img = document.getElementById('image');
img.src = localStorage.getItem('image');

関連記事