LocalStorage を使用して画像を保存および表示するにはどうすればよいですか?

LocalStorage を使用した画像の保存と表示

質問:

アップロードした画像を localStorage に保存して表示するにはどうすればよいですか?それは後続のpage?

答え:

画像の保存

1. getElementById('bannerImage' を使用して画像要素を取得します) ).
2. を使用して画像を Base64 文字列に変換します。 getBase64Image() 関数:

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,/, "");
}

3. localStorage.setItem("imgData", imgData) を使用して Base64 文字列を localStorage に保存します。

を表示する画像

1. 次のページで、空の src 属性を持つ画像要素を作成します: 。
2. 次を使用して、localStorage から Base64 文字列を取得します。 localStorage.getItem('imgData').
3. 画像の src 属性を Base64 に設定します文字列：bannerImg.src = "data:image/png;base64," dataImage.

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