Câu hỏi Chuyển đổi blob thành base64


Đây là đoạn mã cho mã mà tôi muốn làm Blob đến Base64 chuỗi:

Phần nhận xét này hoạt động và khi URL được tạo bởi điều 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 ra 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?


76
2017-09-06 04:55


gốc




Các câu trả lời:


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

Tạo thành tài liệu  readAsDataURL mã hóa thành base64


147
2017-09-06 05:05



Chuỗi đầu ra dường như không giống base64? - xybrek
@xybrek Nếu bạn in read.result, bạn sẽ thấy base64 trong chuỗi chính nó. - Nawaf Alsulami
Điều này có hoạt động trên Safari iOS 6 không? - SuperMarco
console.log (base64data.substr (base64data.indexOf (',') + 1)); - palota
Câu trả lời này không chính xác, nó thêm các ký tự không có base64 vào trước chuỗi. - Joshua Smith


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

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

10
2017-10-27 16:19



Lập luận là gì cb? - Fellow Stranger
@ FellowStranger thường gọi lại, được sử dụng như blobToBase64 (myBlob, hàm (base64String) {/ * sử dụng base64String * /}), bởi vì nó không đồng bộ - Leonard Pauli
@yeahdixon, Dường như tôi cần sự giúp đỡ của bạn. Nhìn này: stackoverflow.com/questions/46192069/… - Success Man


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à: Thực hiệ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);}
     });
 }

3
2018-02-04 08:50





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


2
2017-12-15 12:36





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

2
2018-02-02 15:16



Bạn có thể giải thích cách giải quyết vấn đề này không? - Vemonus
Nice, @Vemonus vì FileReader phơi bày thành thuộc tính kết quả là base64, hoạt động hoàn hảo. - Cami Rodriguez


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

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


0
2018-04-04 13:06



Đây là một câu trả lời được đánh giá thấp. Tôi đã gặp rất nhiều rắc rối với điều này. Cảm ơn bạn. Lỗi của tôi không được chuyển qua tùy chọn mã hóa 'binary' khi tạo bộ đệm của tôi. - Slbox
Bởi vì câu trả lời này sử dụng các API Node và do đó không trả lời câu hỏi ban đầu về Blob (API trình duyệt). - RReverser
Bộ đệm là gì? - TeodorKolev