Blob'u base64'e dönüştürme

Bu yapmak istediğim kodu için snippet'idir Blobiçin Base64dize:

Yorumlu bu kısım çalışır ve bunun oluşturduğu URL img src olarak ayarlandığında resmi görüntüler:

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

Sorun daha düşük kodda, üretilen kaynak değişken boş

Güncelleme:

Yukarıdaki kodda olduğu gibi Blob dosyasından Base64 String oluşturabilmek için bunu JQuery ile yapmanın daha kolay bir yolu var mı?

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

Form docs readAsDataURL base64 kodlar

bu benim için çalıştı:

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

Yığınlara bağlı olmayan saf bir JavaSript yolu vardır:

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

Bu yardımcı işlevi kullanmak için bir geri arama ayarlamalısınız, örneğin:

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

React Native projesinde sorunum için bu yardımcı işlevi yazıyorum, bir görüntüyü indirmek ve ardından önbelleğe alınmış bir görüntü olarak saklamak istedim:

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

veya

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

Response'un yapıcısına bakın , daha sonra eşzamansız yöntem / geri çağırmalarla [blob, buffer source form data, readable stream, etc.]dönüştürülebilen Response'a dönüşebilirsiniz [json, text, array buffer, blob].

edit: @Ralph'ın da bahsettiği gibi, her şeyi utf-8 dizesine dönüştürmek sorunlara neden olur (ne yazık ki Yanıt API'si ikili dizeye dönüştürme yolu sağlamaz), bu nedenle dizi arabelleği bunun yerine ara olarak kullanılır, bu da iki adım daha gerektirir ( bayt dizisi SONRA ikili dizeye), yerel btoayöntemi kullanmakta ısrar ediyorsanız .

sorunu şu şekilde çözebilirsiniz:

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

Umarım bu sana yardımcı olur

Yani sorun, temel bir 64 görüntü yüklemek istemeniz ve bir blob URL'nizin olmasıdır. Şimdi tüm html 5 tarayıcılarında işe yarayacak cevap: Yapın:

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

Bir listede saklamak için base64 değerine erişimim olan bir şey istedim ve benim için olay dinleyicisi eklemek işe yaradı. Sadece görüntü blobunu okuyacak ve sonuçta base64'ü döndürecek Dosya Okuyucusuna ihtiyacınız var.

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

Son bölüm, belirtilen Blob'un içeriğini okumak için kullanılan çok önemli olan readAsDataURL'dir.

Tek bir kod satırında en kolay yol

var base64Image = new Buffer (blob, 'binary') .toString ('base64');