Blob을 base64로 변환

이것은 내가 원하는 코드의 조각이다 Blob에 Base64문자열 :

이 주석 처리 된 부분이 작동하며 이것에 의해 생성 된 URL이 img src로 설정되면 이미지가 표시됩니다.

var blob = items[i].getAsFile();
//var URLObj = window.URL || window.webkitURL;
//var source = URLObj.createObjectURL(blob);
//console.log("image source=" + source);

var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)
}; // data url!
var source = reader.readAsBinaryString(blob);

문제는 하위 코드와 관련이 있으며 생성 된 소스 변수는 null입니다.

최신 정보:

위의 코드와 같이 Blob 파일에서 Base64 문자열을 만들 수 있도록 JQuery 로이 작업을 수행하는 더 쉬운 방법이 있습니까?

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

문서 readAsDataURL 를 base64로 인코딩 양식

이것은 나를 위해 일했다 :

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

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

스택에 의존하지 않는 순수한 JavaSript 방식이 있습니다.

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

React Native 프로젝트에서 내 문제에 대한이 도우미 함수를 작성하고 이미지를 다운로드 한 다음 캐시 된 이미지로 저장하려고했습니다.

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

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

참조 응답의 생성자를 , 당신은 켤 수 [blob, buffer source form data, readable stream, etc.]에 응답 다음으로 설정할 수 있습니다, [json, text, array buffer, blob]비동기 방식 / 콜백.

편집 : @Ralph가 언급했듯이 모든 것을 utf-8 문자열로 바꾸면 문제가 발생합니다 (불행히도 Response API는 이진 문자열로 변환하는 방법을 제공하지 않습니다). 따라서 배열 버퍼 는 중간으로 사용되므로 두 단계가 더 필요합니다 ( 원시 btoa메소드 사용을 주장하는 경우 바이트 배열 THEN을 이진 문자열로) .

다음을 통해 문제를 해결할 수 있습니다.

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

나는 이것이 당신을 돕기를 바랍니다

따라서 문제는 기본 64 이미지를 업로드하고 BLOB 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);}
     });
 }

base64 값에 액세스하여 목록에 저장하고 이벤트 리스너를 추가 할 수있는 무언가를 원했습니다. 이미지 블로 브를 읽고 결과에 base64를 반환하는 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);
    }
 }

마지막 부분은 지정된 Blob의 내용을 읽는 데 매우 중요한 readAsDataURL입니다.

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

var base64Image = 새 버퍼 (blob, 'binary') .toString ( 'base64');