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

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를 이미지의 소스로 사용하십시오.

---

"Note that you need to have image fully loaded first (otherwise ending up in having empty images), so in some cases you'd need to wrap handling into: bannerImage.addEventListener("load", function () {}); – yuga Nov 1 '17 at 13:04"

This is extremely IMPORTANT. One of the the options i'm exploring this afternoon is using javascript callback methods rather than addEventListeners since that doesn't seem to bind correctly either. Getting all the elements ready before page load WITHOUT a page refresh is critical.

If anyone can expand upon this please do - as in, did you use a settimeout, a wait, a callback, or an addEventListener method to get the desired result. Which one and why?

---

I have come up with the same issue, instead of storing images, that eventually overflow the local storage, you can just store the path to the image. something like:

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

참고URL : https://stackoverflow.com/questions/19183180/how-to-save-an-image-to-localstorage-and-display-it-on-the-next-page