[JQUERY] 에서 자바 스크립트 / JQuery와 이미지로 변환 base64로

에서 자바 스크립트 / JQuery와 이미지로 변환 base64로

해결법

1. ---

   1.당신은 이미지 객체를 생성하고 데이터를 포함하여 SRC로 base64로 넣을 수 있습니다 : 이미지 ... 이런 부분 :

   당신은 이미지 객체를 생성하고 데이터를 포함하여 SRC로 base64로 넣을 수 있습니다 : 이미지 ... 이런 부분 :

   var image = new Image();
   image.src = 'data:image/png;base64,iVBORw0K...';
   document.body.appendChild(image);
   

   그것은 그들이 "데이터 URI를"부르는 여기에 내면의 평화에 대한 호환성 테이블입니다.

2. ---

   2.이것은 정확히 OP의 시나리오하지만 댓글의 일부 사람들에 대한 답변하지 않습니다. 그것은 JQuery와 같은 다른 프레임 워크에 적용 할 수 있어야 코도 1 및 각도에 기초하는 용액이다. 그것은 당신이 어딘가에 저장하고 클라이언트 측 자바 스크립트 / HTML에서 참조 할 수 Base64로 데이터에서 당신의 Blob을 제공합니다.

   이것은 정확히 OP의 시나리오하지만 댓글의 일부 사람들에 대한 답변하지 않습니다. 그것은 JQuery와 같은 다른 프레임 워크에 적용 할 수 있어야 코도 1 및 각도에 기초하는 용액이다. 그것은 당신이 어딘가에 저장하고 클라이언트 측 자바 스크립트 / HTML에서 참조 할 수 Base64로 데이터에서 당신의 Blob을 제공합니다.

   또한 기본 64 개의 데이터에서 이미지 (파일)을하는 방법에 대한 원래의 질문에 대답 :

   중요한 부분은 자료 64 - 바이너리 변환 :

   function base64toBlob(base64Data, contentType) {
       contentType = contentType || '';
       var sliceSize = 1024;
       var byteCharacters = atob(base64Data);
       var bytesLength = byteCharacters.length;
       var slicesCount = Math.ceil(bytesLength / sliceSize);
       var byteArrays = new Array(slicesCount);
   
       for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
           var begin = sliceIndex * sliceSize;
           var end = Math.min(begin + sliceSize, bytesLength);
   
           var bytes = new Array(end - begin);
           for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
               bytes[i] = byteCharacters[offset].charCodeAt(0);
           }
           byteArrays[sliceIndex] = new Uint8Array(bytes);
       }
       return new Blob(byteArrays, { type: contentType });
   }
   

   슬라이스는 메모리 부족 오류 방지하기 위해 필요합니다.

   (적어도 그게 내가 테스트 기능) JPG와 PDF 파일과 함께 작동합니다. 다른 MIME 형식으로 작동합니다 / 너무 contenttypes. 그들은 Uint8Array, 물방울 및 atoB 유전자를 지원해야, 당신이 목표로 브라우저 및 해당 버전을 확인합니다.

   여기 코르도바 / 안드로이드 장치의 로컬 저장소에 파일을 작성하는 코드는 다음과 같습니다

   ...
   window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function(dirEntry) {
   
                       // Setup filename and assume a jpg file
                       var filename = attachment.id + "-" + (attachment.fileName ? attachment.fileName : 'image') + "." + (attachment.fileType ? attachment.fileType : "jpg");
                       dirEntry.getFile(filename, { create: true, exclusive: false }, function(fileEntry) {
                           // attachment.document holds the base 64 data at this moment
                           var binary = base64toBlob(attachment.document, attachment.mimetype);
                           writeFile(fileEntry, binary).then(function() {
                               // Store file url for later reference, base 64 data is no longer required
                               attachment.document = fileEntry.nativeURL;
   
                           }, function(error) {
                               WL.Logger.error("Error writing local file: " + error);
                               reject(error.code);
                           });
   
                       }, function(errorCreateFile) {
                           WL.Logger.error("Error creating local file: " + JSON.stringify(errorCreateFile));
                           reject(errorCreateFile.code);
                       });
   
                   }, function(errorCreateFS) {
                       WL.Logger.error("Error getting filesystem: " + errorCreateFS);
                       reject(errorCreateFS.code);
                   });
   ...
   

   파일 자체를 작성 :

   function writeFile(fileEntry, dataObj) {
       return $q(function(resolve, reject) {
           // Create a FileWriter object for our FileEntry (log.txt).
           fileEntry.createWriter(function(fileWriter) {
   
               fileWriter.onwriteend = function() {
                   WL.Logger.debug(LOG_PREFIX + "Successful file write...");
                   resolve();
               };
   
               fileWriter.onerror = function(e) {
                   WL.Logger.error(LOG_PREFIX + "Failed file write: " + e.toString());
                   reject(e);
               };
   
               // If data object is not passed in,
               // create a new Blob instead.
               if (!dataObj) {
                   dataObj = new Blob(['missing data'], { type: 'text/plain' });
               }
   
               fileWriter.write(dataObj);
           });
       })
   }
   

   나는 최신 코르도바 (6.5.0)와 플러그인 버전을 사용하고 있습니다 :

   내가 올바른 방향으로 여기 세트 모두를 바랍니다.

3. ---

   3.요셉의 대답 @에 따라이를 추가해야합니다. 이미지 객체를 생성 할 사람 경우 :

   요셉의 대답 @에 따라이를 추가해야합니다. 이미지 객체를 생성 할 사람 경우 :

   var image = new Image();
   image.onload = function(){
      console.log(image.width); // image is loaded and we have image width 
   }
   image.src = 'data:image/png;base64,iVBORw0K...';
   document.body.appendChild(image);
   

4. ---

   4.

   var src = "data:image/jpeg;base64,";
   src += item_image;
   var newImage = document.createElement('img');
   newImage.src = src;
   newImage.width = newImage.height = "80";
   document.querySelector('#imageContainer').innerHTML = newImage.outerHTML;//where to insert your image
   

5. ---

   5.html로

   html로

   <img id="imgElem"></img>
   

   JS

   string baseStr64="/9j/4AAQSkZJRgABAQE...";
   imgElem.setAttribute('src', "data:image/jpg;base64," + baseStr64);
   

6. ---

   6.하나 개는 빠르고 쉬운 방법 :

   하나 개는 빠르고 쉬운 방법 :

   function paintSvgToCanvas(uSvg, uCanvas) {
   
       var pbx = document.createElement('img');
   
       pbx.style.width  = uSvg.style.width;
       pbx.style.height = uSvg.style.height;
   
       pbx.src = 'data:image/svg+xml;base64,' + window.btoa(uSvg.outerHTML);
       uCanvas.getContext('2d').drawImage(pbx, 0, 0);
   
   }
   

from https://stackoverflow.com/questions/21227078/convert-base64-to-image-in-javascript-jquery by cc-by-sa and MIT license