페이지 로드 시 localStorage를 사용하여 이미지를 어떻게 저장하고 표시할 수 있습니까?

페이지 로드 전반에 걸쳐 localStorage를 사용하여 이미지 저장 및 표시

문제:

사용자가 업로드할 수 있음 이미지를 만들고, 양식 입력을 작성하고, 양식을 localStorage에 저장한 후 다음 단계로 진행하세요. 새 페이지. 목표는 업로드된 이미지를 localStorage에 저장하고 다음 페이지에 표시하는 것입니다.

해결책:

1. 이미지:

   • 사용 getElementById는 이미지가 포함된 HTML 요소를 검색합니다.

2. Base64로 변환:

   • 캔버스를 사용하여 이미지를 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;

이 솔루션을 사용하면 업로드된 이미지를 localStorage에 Base64 문자열을 검색하고 이를 이미지의 src 속성으로 설정하여 다른 페이지에 표시합니다.

위 내용은 페이지 로드 시 localStorage를 사용하여 이미지를 어떻게 저장하고 표시할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!