Преобразование больших двоичных объектов в base64

- Это фрагмент кода, который я хочу сделать Blob to 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

обновление:

есть ли более простой способ сделать это с помощью JQuery, чтобы иметь возможность создавать строку Base64 из файла Blob, как в коде наверху?

6 77
javascript jquery

6 ответов:

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

формы docsreadAsDataURL кодирует в base64

153

это сработало для меня:

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

Итак, проблема в том, что вы хотите загрузить базовое изображение 64, и у вас есть url-адрес blob. Теперь ответ, который будет работать на всех браузерах 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);}
     });
 }
3

вы можете исправить проблему:

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

Я надеюсь, что это поможет вам

2
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

самый простой способ в одной строке кода

var base64Image = новый буфер (blob, 'binary').toString ('base64');

0