[JQUERY] 64 기수로 변환 BLOB

64 기수로 변환 BLOB

해결법

1. ---

   1.

    var reader = new FileReader();
    reader.readAsDataURL(blob); 
    reader.onloadend = function() {
        var base64data = reader.result;                
        console.log(base64data);
    }
   

   워드 프로세서를 64 기수로 readAsDataURL의 인코딩 양식

2. ---

   2.이것은 나를 위해 일한 :

   이것은 나를 위해 일한 :

   var blobToBase64 = function(blob, callback) {
       var reader = new FileReader();
       reader.onload = function() {
           var dataUrl = reader.result;
           var base64 = dataUrl.split(',')[1];
           callback(base64);
       };
       reader.readAsDataURL(blob);
   };
   

3. ---

   3.어떤 스택에 의존하지 않는 순수 자바 스크립트 방법이 있습니다 :

   어떤 스택에 의존하지 않는 순수 자바 스크립트 방법이 있습니다 :

   const blobToBase64 = blob => {
     const reader = new FileReader();
     reader.readAsDataURL(blob);
     return new Promise(resolve => {
       reader.onloadend = () => {
         resolve(reader.result);
       };
     });
   };
   

   이 도우미 기능을 사용하기 위해 당신은 콜백 예를 설정해야합니다 :

   blobToBase64(blobData).then(res => {
     // do what you wanna do
     console.log(res); // res is base64 now
   });
   

   내가 캐시 된 이미지로 이미지를 다운로드 한 다음 보관하고 싶어, 기본 프로젝트 반응에 내 문제에 대한이 헬퍼 함수를 ​​작성 :

   fetch(imageAddressAsStringValue)
     .then(res => res.blob())
     .then(blobToBase64)
     .then(finalResult => { 
       storeOnMyLocalDatabase(finalResult);
     });
   

4. ---

   4.

   var audioURL = window.URL.createObjectURL(blob);
   audio.src = audioURL;
   
   var reader = new window.FileReader();
   reader.readAsDataURL(blob);
   reader.onloadend = function () {
        base64data = reader.result;
        console.log(base64data);
   }
   

5. ---

   5.

   function bufferToBinaryString(arrayBuffer){
       return String.fromCharCode(...new Uint8Array(arrayBuffer));
   }
   (async () => console.log(btoa(bufferToBinaryString(await new Response(blob).arrayBuffer()))))();
   

   또는

   function bufferToBinaryString(arrayBuffer){
       return String.fromCharCode(...new Uint8Array(arrayBuffer));
   }
   new Response(blob).arrayBuffer().then(arr_buf => console.log(btoa(bufferToBinaryString(arr_buf)))))
   

   다음 비동기 방식 / 콜백 [JSON 텍스트 배열 버퍼 블롭]으로 전환 될 수있는 응답에 [기타 소스 형식 데이터 판독 스트림 버퍼, 블롭] 당신 차례 수 응답 생성자 참조.

   편집 : 배열 버퍼가 두 개 더 단계를 필요로하는 대신 중간으로 사용하므로 @Ralph이 UTF-8 문자열로 모든 것을 돌려, 언급 한 바와 같이이 문제를 (불행히도 응답 API 이진 문자열로 변환하는 방법을 제공하지 않습니다) 원인 (로 변환 바이너리 문자열로 THEN 바이트 배열), 네이티브 btoa 방법을 사용하여 주장합니다.

6. ---

   6.당신은 문제를 고칠 수 있습니다 :

   당신은 문제를 고칠 수 있습니다 :

   var canvas = $('#canvas'); 
   var b64Text = canvas.toDataURL();
   b64Text = b64Text.replace('data:image/png;base64,','');
   var base64Data = b64Text;
   

   나는이 도움을 바란다

7. ---

   7.그래서 문제는 기본 64 이미지를 업로드 할 것입니다 그리고 당신은 방울 URL을 가지고있다. 이제 모든 HTML 5 개 브라우저에서 작동 대답은 : 하다:

   그래서 문제는 기본 64 이미지를 업로드 할 것입니다 그리고 당신은 방울 URL을 가지고있다. 이제 모든 HTML 5 개 브라우저에서 작동 대답은 : 하다:

     var fileInput = document.getElementById('myFileInputTag');
     var preview = document.getElementById('myImgTag');
   
     fileInput.addEventListener('change', function (e) {
         var url = URL.createObjectURL(e.target.files[0]);
         preview.setAttribute('src', url);
     });
   function Upload()
   {
        // preview can be image object or image element
        var myCanvas = document.getElementById('MyCanvas');
        var ctx = myCanvas.getContext('2d');
        ctx.drawImage(preview, 0,0);
        var base64Str = myCanvas.toDataURL();
        $.ajax({
            url: '/PathToServer',
            method: 'POST',
            data: {
                imageString: base64Str
            },
        success: function(data) { if(data && data.Success) {}},
        error: function(a,b,c){alert(c);}
        });
    }
   

8. ---

   8.나는리스트로 나 이벤트 리스너가 일을 추가하기위한 저장소에 base64로 값에 액세스 할 수있는 뭔가를 원했다. 당신은 이미지 덩어리를 읽고 결과에서 64 기수를 돌려주는 것을 FileReader가 필요합니다.

   나는리스트로 나 이벤트 리스너가 일을 추가하기위한 저장소에 base64로 값에 액세스 할 수있는 뭔가를 원했다. 당신은 이미지 덩어리를 읽고 결과에서 64 기수를 돌려주는 것을 FileReader가 필요합니다.

   createImageFromBlob(image: Blob) {
       const reader = new FileReader();
       const supportedImages = []; // you can also refer to some global variable
       reader.addEventListener(
         'load',
         () => {
           // reader.result will have the required base64 image
           const base64data = reader.result;
           supportedImages.push(base64data); // this can be a reference to global variable and store the value into that global list so as to use it in the other part
         },
         false
       );
       // The readAsDataURL method is used to read the contents of the specified Blob or File.
       if (image) {
         reader.readAsDataURL(image);
       }
    }
   

   마지막 부분은 매우 중요하다 readAsDataURL 지정된 물방울의 내용을 읽는 데 사용되는 것입니다

9. ---

   9.한 줄의 코드에서 가장 쉬운 방법

   한 줄의 코드에서 가장 쉬운 방법

from https://stackoverflow.com/questions/18650168/convert-blob-to-base64 by cc-by-sa and MIT license