[JQUERY] 어떻게 로컬 스토리지에 이미지를 저장하고 다음 페이지에 표시 할?

어떻게 로컬 스토리지에 이미지를 저장하고 다음 페이지에 표시 할?

해결법

1. ---

   1.또한 해결이 문제를 필요로 누구에게 :

   또한 해결이 문제를 필요로 누구에게 :

   첫째, 나는에서 getElementById 내 이미지를 잡아하고, Base64로로 이미지를 저장합니다. 그럼 난 내 로컬 스토리지 값으로 Base64로 문자열을 저장합니다.

   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로 문자열을 얻기 위해이 다음 세 줄을 사용하고, 내가 만든 빈 SRC와 이미지에 적용 똑바로 때 :

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

   꽤 몇 가지 다른 브라우저와 버전을 테스트하고, 아주 잘 작동하는 것 같다.

2. ---

   2.나는 로컬 스토리지 JQueryImageCaching에 이미지를 저장하는 작은 2,2kb 라이브러리를 작성 용법:

   나는 로컬 스토리지 JQueryImageCaching에 이미지를 저장하는 작은 2,2kb 라이브러리를 작성 용법:

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

3. ---

   3.당신은 데이터 URI에 이미지를 직렬화 할 수있다. 이 블로그 게시물 튜토리얼이있다. 즉, 로컬 스토리지에 저장할 수있는 문자열을 생성합니다. 그런 다음 페이지, 이미지의 소스로 데이터 URI를 사용합니다.

   당신은 데이터 URI에 이미지를 직렬화 할 수있다. 이 블로그 게시물 튜토리얼이있다. 즉, 로컬 스토리지에 저장할 수있는 문자열을 생성합니다. 그런 다음 페이지, 이미지의 소스로 데이터 URI를 사용합니다.

4. ---

   4.이미지가 잘려지고 계속, 여기 로컬 스토리지에 저장하기 전에 이미지 파일의 크기를 얻을 수있는 몇 가지 코드입니다.

   이미지가 잘려지고 계속, 여기 로컬 스토리지에 저장하기 전에 이미지 파일의 크기를 얻을 수있는 몇 가지 코드입니다.

   첫째, 나는 너비와 높이 값을 유지하기 위해 몇 가지 숨겨진 입력 상자를 만들 것

   <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();
   

   또한, 모든 파일에 대한 300킬로바이트의 크기를 유지해야 할 것입니다. 커버 파일 크기 유효성 검사 자바 스크립트를 사용하는 것이 유래에 대한 게시물이 있습니다.

5. ---

   5."참고 이미지 완전히 그래서 어떤 경우에는 당신이로 처리 바꿈해야 할 것, (그렇지 않으면 빈 이미지를 가지고에서 끝나는) 처음로드해야 할 필요가 : bannerImage.addEventListener (")로드 ", 기능 ({}); - 유가 11월 1일 13시 4분에서 '17 "

   "참고 이미지 완전히 그래서 어떤 경우에는 당신이로 처리 바꿈해야 할 것, (그렇지 않으면 빈 이미지를 가지고에서 끝나는) 처음로드해야 할 필요가 : bannerImage.addEventListener (")로드 ", 기능 ({}); - 유가 11월 1일 13시 4분에서 '17 "

   이것은 매우 중요합니다. 하여 옵션 중 하나는 그 중 하나를 제대로 결합하지 않는 것 때문에 오늘 오후 자바 스크립트 콜백 메소드보다는 addEventListeners을 사용하고 탐험하고 있습니다. 페이지 새로 고침없이 페이지로드 전에 준비 모든 요소를 ​​얻는 것은 매우 중요하다.

   사람이 따라 확장 할 수 있다면 제발 - 같이, 당신은의 setTimeout, 대기, 콜백, 또는 원하는 결과를 얻을 수있는 addEventListener 메소드를 사용했다. 어느 그 이유는 무엇입니까?

6. ---

   6.

   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);
   });
   

   예 CodePen

7. ---

   7.나는 결국 로컬 스토리지 오버 플로우, 당신은 단지 이미지의 경로를 저장할 수, 대신 저장하는 이미지로, 같은 문제를 가지고 올 수 있습니다. 뭔가 같은 :

   나는 결국 로컬 스토리지 오버 플로우, 당신은 단지 이미지의 경로를 저장할 수, 대신 저장하는 이미지로, 같은 문제를 가지고 올 수 있습니다. 뭔가 같은 :

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

from https://stackoverflow.com/questions/19183180/how-to-save-an-image-to-localstorage-and-display-it-on-the-next-page by cc-by-sa and MIT license