Ubah gumpalan ke base64

Ini adalah cuplikan untuk kode yang ingin saya lakukan Blobuntuk Base64merangkai:

Bagian yang dikomentari ini berfungsi dan ketika URL yang dihasilkan oleh ini disetel ke img src, ia akan menampilkan gambar:

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

Masalahnya adalah dengan kode yang lebih rendah, variabel sumber yang dihasilkan adalah nol

Memperbarui:

Apakah ada cara yang lebih mudah untuk melakukan ini dengan JQuery untuk dapat membuat Base64 String dari file Blob seperti pada kode di atas?

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

Bentuk dokumen yang readAsDataURL dikodekan ke base64

ini bekerja untuk saya:

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

Ada cara JavaSript murni yang tidak bergantung pada tumpukan:

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

Untuk menggunakan fungsi pembantu ini Anda harus menetapkan panggilan balik, contoh:

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

Saya menulis fungsi pembantu ini untuk masalah saya pada proyek React Native, saya ingin mengunduh gambar dan kemudian menyimpannya sebagai gambar cache:

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

atau

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

lihat konstruktor Response , Anda dapat berubah [blob, buffer source form data, readable stream, etc.]menjadi Respons , yang kemudian dapat diubah menjadi [json, text, array buffer, blob]dengan metode / panggilan balik async.

sunting: seperti yang disebutkan @Ralph, mengubah semuanya menjadi utf-8 string menyebabkan masalah (sayangnya API Respons tidak menyediakan cara untuk mengubah ke string biner), jadi buffer array digunakan sebagai perantara, yang membutuhkan dua langkah lagi (mengubahnya menjadi byte array LALU ke string biner), jika Anda bersikeras menggunakan btoametode asli .

Anda dapat memperbaiki masalah dengan:

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

Saya harap ini membantu Anda

Jadi masalahnya adalah Anda ingin mengunggah gambar basis 64 dan Anda memiliki url gumpalan. Sekarang jawaban yang akan bekerja pada semua browser html 5 adalah: Do:

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

Saya ingin sesuatu di mana saya memiliki akses ke nilai base64 untuk disimpan ke dalam daftar dan bagi saya menambahkan pendengar acara bekerja. Anda hanya perlu FileReader yang akan membaca gumpalan gambar dan mengembalikan base64 di hasilnya.

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

Bagian terakhir adalah readAsDataURL yang sangat penting digunakan untuk membaca konten Blob yang ditentukan

Cara termudah dalam satu baris kode

var base64Image = Buffer baru (gumpalan, 'biner') .toString ('base64');