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

localStorage에 이미지 저장 및 다음 페이지에 표시

귀하의 요구 사항은 이미지를 업로드하고 localStorage에 저장한 다음 그런 다음 다음 페이지에 표시합니다. 다음은 이러한 요구 사항을 해결하는 솔루션입니다.

이미지 저장

언급한 HTML 및 JavaScript 기능을 사용하여 페이지에 이미지를 표시한 후 다음 추가 사항을 따르세요. '저장' 버튼을 클릭할 때의 단계:

1. 다음을 사용하여 배너 이미지에 대한 HTML 요소를 검색합니다. document.getElementById('bannerImg').
2. 아래 제공된 getBase64Image 함수를 사용하여 이미지를 Base64 문자열로 변환합니다.
3. localStorage.setItem("imgData)을 사용하여 Base64 문자열을 localStorage 항목으로 저장합니다. ", imgData).

이미지를 Base64 문자열로 변환하는 기능:

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

다음 페이지에 이미지 표시

다음 페이지에서는 빈 src로 이미지를 생성합니다. 속성:

<img src="">

그런 다음 페이지가 로드되면 다음 줄을 실행합니다.

1. var dataImage = localStorage.getItem('imgData')를 사용하여 localStorage에서 Base64 문자열을 검색합니다.
2. bannerImg =를 사용하여 테이블 배너 이미지에 대한 HTML 요소를 가져옵니다. document.getElementById('tableBanner').

3. 이미지의 src 속성을 Base64 문자열로 설정합니다.

   bannerImg.src = "data:image/png;base64," + dataImage;

이 접근 방식을 사용하면 localStorage에 이미지를 저장하고 문제 없이 다음 페이지에 표시하세요.

위 내용은 이미지를 localStorage에 저장하고 다음 페이지에 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!