localStorage에 이미지를 저장하고 다음 페이지에 이미지를 표시하는 방법은 무엇입니까?

따라서 기본적으로 단일 이미지를 업로드하고 localStorage에 저장 한 후 다음 페이지에 표시해야합니다.

현재 HTML 파일을 업로드하고 있습니다.

<input type='file' id="uploadBannerImage" onchange="readURL(this);" />

이 기능을 사용하여 페이지에 이미지를 표시합니다.

function readURL(input) 
{
    document.getElementById("bannerImg").style.display = "block";

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('bannerImg').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

사용자가 볼 수 있도록 이미지가 페이지에 즉시 표시됩니다. 그런 다음 나머지 양식을 작성하라는 요청을받습니다. 이 부분은 완벽하게 작동합니다.

양식이 완성되면 '저장'버튼을 누릅니다. 이 버튼을 누르면 모든 양식 입력을 localStorage문자열 로 저장합니다 . 이미지를 localStorage항목 으로 저장하는 방법이 필요합니다 .

저장 버튼은 새 페이지로 안내합니다. 이 새 페이지에는 이미지가 맨 위에있는 테이블에 사용자 데이터가 표시됩니다.

간단하고 간단 localStorage해서 '저장'버튼을 누르면 이미지를 저장 한 다음에서 다음 페이지의 이미지를 대여해야합니다 localStorage.

이 바이올린 과 moz : // a HACKS 기사 와 같은 솔루션을 찾았 습니다 .

나는 이것이 어떻게 작동하는지 여전히 혼란 스럽지만 간단한 해결책 만 있으면됩니다. 기본적으로 getElementByID'저장'버튼을 누르면 이미지를 찾은 다음 이미지를 처리하고 저장해야합니다.

이 문제가 필요한 사람에게는 다음이 해결되었습니다.

먼저으로 이미지를 가져 와서 이미지를 getElementByIDBase64로 저장합니다. 그런 다음 Base64 문자열을 내 localStorage값 으로 저장합니다 .

bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", 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="" id="tableBanner" />

그리고 페이지가로드되면 바로 다음 세 줄을 사용하여에서 Base64 문자열을 가져 와서 내가 만든 localStorage공백으로 이미지에 적용합니다 src.

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

몇 가지 다른 브라우저와 버전에서 테스트했으며 꽤 잘 작동하는 것 같습니다.

localStorage JQueryImageCaching 사용법에 이미지를 저장하는 작은 2,2kb 라이브러리를 작성했습니다 .

<img data-src="path/to/image">
<script>
    $('img').imageCaching();
</script>

이미지를 데이터 URI로 직렬화 할 수 있습니다. 이 블로그 게시물 에는 튜토리얼이 있습니다. 로컬 저장소에 저장할 수있는 문자열이 생성됩니다. 다음 페이지에서 데이터 uri를 이미지의 소스로 사용하십시오.

"이미지를 먼저 완전히로드해야합니다 (그렇지 않으면 빈 이미지로 끝나야 함). 경우에 따라 처리를 다음과 같이 랩핑해야합니다. bannerImage.addEventListener ("load ", function () {}); yuga 11 월 1 일 17시 13:04 "

이것은 매우 중요합니다. 오늘 오후에 탐색 할 옵션 중 하나는 addEventListeners 대신 javascript 콜백 메소드를 사용하는 것입니다 .addEventListeners도 올바르게 바인딩되지 않는 것 같습니다. 페이지를 새로 고치지 않고 페이지를로드하기 전에 모든 요소를 ​​준비하는 것이 중요합니다.

누구든지이를 확장 할 수 있다면 in-와 같이 settimeout, 대기, 콜백 또는 addEventListener 메소드를 사용하여 원하는 결과를 얻었습니까? 어느 것과 왜?

이미지를 저장하는 대신 동일한 문제가 발생하여 결국 로컬 저장소가 오버플로되므로 이미지의 경로를 저장할 수 있습니다. 같은 :

let imagen = ev.target.getAttribute('src');
arrayImagenes.push(imagen);