이미지를 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 HAKS에서 이 fiddle과 이 기사와 같은 해결책을 찾았습니다.

비록 저는 이것이 어떻게 작동하는지 여전히 매우 혼란스럽고, 단지 간단한 해결책이 필요합니다.기본적으로, 나는 단지 다음을 통해 이미지를 찾기만 하면 됩니다.getElementByID저장' 버튼을 누른 다음 이미지를 처리하고 저장합니다.

이 문제를 해결해야 하는 사람들에게:

.getElementByID를 Base64 로로 합니다.음 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 Usage에 이미지를 저장하는 작은 2,2kb 라이브러리를 작성했습니다.

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

이미지를 Data URI로 직렬화할 수 있습니다.이 블로그 게시물에 자습서가 있습니다.그러면 로컬 저장소에 저장할 수 있는 문자열이 생성됩니다.그런 다음 다음 페이지에서 data uri를 이미지의 소스로 사용합니다.

승인된 답변과 James H. Kelly의 코멘트, 그리고 FileReader 객체를 조합하여 사용했습니다.

먼저 업로드된 이미지를 Base64 문자열로 저장하였습니다.FileReader개체:

// get user's uploaded image
const imgPath = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();

reader.addEventListener("load", function () {
    // convert image file to base64 string and save to localStorage
    localStorage.setItem("image", reader.result);
}, false);

if (imgPath) {
    reader.readAsDataURL(imgPath);
}

그런 다음 localStorage에서 이미지를 다시 읽기 위해 다음 작업을 수행했습니다.

let img = document.getElementById('image');
img.src = localStorage.getItem('image');

document.getElementById('file').addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onloadend = () => {
    // convert file to base64 String
    const base64String = reader.result.replace('data:', '').replace(/^.+,/, '');
    // store file
    localStorage.setItem('wallpaper', base64String);
    // display image
    document.body.style.background = `url(data:image/png;base64,${base64String})`;
  };
  reader.readAsDataURL(file);
});

예제 코드펜

이미지가 계속 잘라지는 경우 로컬 스토리지에 저장하기 전에 이미지 파일의 치수를 가져오는 몇 가지 코드가 있습니다.

먼저 가로와 세로 값을 담을 숨겨진 입력 상자를 만들겠습니다.

<input id="file-h" hidden type="text"/>
<input id="file-w" hidden type="text"/>

그런 다음 파일의 치수를 입력 상자에 가져옵니다.

var _URL = window.URL || window.webkitURL;
$("#file-input").change(function(e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function() {
            $("#file-h").val(this.height);
            $("#file-w").val(this.width);
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };
        img.src = _URL.createObjectURL(file);
    }
});

마지막으로 입력 상자 값을 가리켜 getBase64Image() 함수에 사용되는 너비 및 높이 개체를 변경합니다.

부터

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

로.

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = $("#file-w").val();
    canvas.height = $("#file-h").val();

또한 모든 파일에 대해 약 300kb의 크기를 유지해야 합니다.스택 오버플로우에는 자바스크립트를 이용한 파일 크기 검증을 다루는 게시물이 있습니다.

"먼저 이미지를 완전히 로드해야 하므로(그렇지 않으면 빈 이미지가 됨), 경우에 따라 bannerImage.addEventListener("load"), function() {}; – yuga Nov 1 '17 at 13:04"로 처리를 마무리해야 합니다.

이것은 매우 중요합니다. 오늘 오후에 탐색하는 옵션 중 하나는 이벤트 청취자 추가 대신 자바스크립트 콜백 방법을 사용하는 것입니다. 왜냐하면 그것도 올바르게 바인딩되지 않는 것 같기 때문입니다.페이지 새로 고침 없이 페이지 로드 전에 모든 요소를 준비하는 것이 중요합니다.

이에 대해 자세히 설명할 수 있는 사람이 있다면, 원하는 결과를 얻기 위해 시간 제한, 대기, 콜백 또는 이벤트 청취자 추가 방법을 사용했습니까?어떤 것과 왜?

이미지를 저장하는 것이 아니라 로컬 스토리지에 오버플로가 발생하는 동일한 문제를 생각해 냈습니다. 이미지 경로만 저장하면 됩니다.다음과 같은 것.

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