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

画像を localStorage に保存し、次のページに表示する

要件は、画像をアップロードし、localStorage に保存し、その後、次のページに表示します。このニーズに対処する解決策は次のとおりです。

画像の保存

前述の HTML 関数と JavaScript 関数を使用してページに画像を表示したら、次の追加の手順に従います。 「保存」ボタンをクリックしたときの手順:

1. バナー画像の HTML 要素を取得するusing document.getElementById('bannerImg').
2. 以下の getBase64Image 関数を使用して、画像を Base64 文字列に変換します。
3. localStorage.setItem(" を使用して、Base64 文字列を localStorage アイテムとして保存します画像データ", 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="">

次に、ページが読み込まれたら次の行を実行します:

1. var dataImage = localStorage.getItem('imgData') を使用して、localStorage から Base64 文字列を取得します。
2. bannerImg = を使用してテーブル バナー画像の HTML 要素を取得します。 document.getElementById('tableBanner').

3. 画像の src 属性を Base64 文字列に設定します。

   bannerImg.src = "data:image/png;base64," + dataImage;

このアプローチにより、画像を localStorage に保存し、問題なく次のページに表示します。

以上が画像を localStorage に保存して次のページに表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。