ページ読み込み時に localStorage を使用して画像を保存および表示するにはどうすればよいですか?

ページ読み込み全体で localStorage を使用した画像の保存と表示

問題:

ユーザーはアップロードできる画像を入力し、フォームに入力し、フォームをローカルストレージに保存して、次の手順に進みます。新しいページ。目標は、アップロードされた画像を localStorage に保存し、次のページに表示することです。

解決策:

1. 画像:

   • getElementById を使用して取得します画像を含む HTML 要素。
2. Base64 への変換:
   画像をCanvas を使用した Base64 文字列表現とtoDataURL.
3. localStorage への保存:
   一意の setItem を使用して、Base64 文字列を値として localStorage に保存します。 key.
4. 次のページ:
   空白の src 属性を持つイメージ要素を作成します。
   • 次を使用して、localStorage から Base64 文字列を取得します。 getItem.
   • Base64 文字列を含むように画像の src 属性を更新します。
5. コード例:
   • 保存先localStorage:

     const imgData = getBase64Image(document.getElementById('bannerImg'));
     localStorage.setItem('imgData', imgData);

   • 次のページに表示中:

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

このソリューションでは、アップロードされた画像をローカルストレージに保存できます。 Base64 文字列を取得し、それを画像の src 属性として設定することで、別のページに表示します。

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