Web 表示用に画像を localStorage に保存および取得するにはどうすればよいですか?

Web 表示用にローカルストレージに画像を保存および取得する

問題:

どうすればよいですか画像をアップロードし、localStorage に保存し、後続のストレージに表示します。ページ?

解決策:

画像をローカルストレージに保存:

1. アップロードされた画像を取得しますgetElementById('bannerImg').

2. getBase64Image() 関数を使用して画像を Base64 文字列に変換します。

   var imgData = getBase64Image(bannerImage);

3. Base64 文字列を次の名前で保存します。ローカルストレージ値:

   localStorage.setItem("imgData", imgData);

ローカルストレージから画像を取得して次のページに表示:

1. 新しいページで、空白の画像要素を作成するsrc:

   <img  src="" alt="Web 表示用に画像を localStorage に保存および取得するにはどうすればよいですか?" >

2. ページの読み込み時に、localStorage から Base64 文字列を取得します。

   var dataImage = localStorage.getItem('imgData');

3. Base64 文字列を画像に適用します。送信元属性:

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

追加の考慮事項:

• getBase64Image() 関数は、デフォルトで画像を PNG 形式に変換します。必要に応じて、別の形式を指定できます。
• このソリューションは、ほとんどの主要なブラウザーと互換性があります。ただし、一部のレガシー ブラウザは localStorage をサポートしていない可能性があります。

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