Chuyển đổi blob sang base64

Đây là đoạn mã cho mã mà tôi muốn thực hiện Blobđể Base64xâu chuỗi:

Phần nhận xét này hoạt động và khi URL được tạo bởi phần này được đặt thành img src, nó sẽ hiển thị hình ảnh:

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

Vấn đề là với mã thấp hơn, biến nguồn được tạo là null

Cập nhật:

Có cách nào dễ dàng hơn để làm điều này với JQuery để có thể tạo Chuỗi Base64 từ tệp Blob như trong đoạn mã trên không?

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

Hình thành các tài liệu được readAsDataURL mã hóa thành base64

điều này làm việc cho tôi:

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

Có một cách JavaSript thuần túy không phụ thuộc vào bất kỳ ngăn xếp nào:

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

Để sử dụng chức năng trợ giúp này, bạn nên đặt một cuộc gọi lại, ví dụ:

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

Tôi viết hàm trợ giúp này cho vấn đề của mình trong dự án React Native, tôi muốn tải xuống một hình ảnh và sau đó lưu trữ nó dưới dạng hình ảnh được lưu trong bộ nhớ 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()))))();

hoặc là

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

xem hàm tạo của Phản hồi , bạn có thể biến [blob, buffer source form data, readable stream, etc.]thành Phản hồi , sau đó có thể được chuyển thành [json, text, array buffer, blob]phương thức / cuộc gọi lại không đồng bộ.

chỉnh sửa: như @Ralph đã đề cập, biến mọi thứ thành chuỗi utf-8 gây ra sự cố (không may API phản hồi không cung cấp cách chuyển đổi thành chuỗi nhị phân), do đó, bộ đệm mảng được sử dụng làm trung gian thay thế, cần thêm hai bước (chuyển đổi thành mảng byte THEN thành chuỗi nhị phân), nếu bạn khăng khăng sử dụng btoaphương thức gốc .

bạn có thể khắc phục sự cố bằng cách:

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

Tôi hy vọng điều này sẽ giúp bạn

Vì vậy, vấn đề là bạn muốn tải lên một hình ảnh cơ sở 64 và bạn có một url blob. Bây giờ câu trả lời sẽ hoạt động trên tất cả các trình duyệt html 5 là: 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);}
     });
 }

Cách dễ nhất trong một dòng mã

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