LocalStorage를 사용하여 이미지를 저장하고 표시하는 방법은 무엇입니까?

LocalStorage를 사용하여 이미지 저장 및 표시

질문:

업로드된 이미지를 localStorage에 저장하고 표시하려면 어떻게 해야 합니까? 그건 다음에 페이지?

답변:

이미지 저장

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로 설정합니다. 문자열: 배너Img.src = "data:image/png;base64," dataImage.

위 내용은 LocalStorage를 사용하여 이미지를 저장하고 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!