将blob转换为base64

Question

将blob转换为base64

这是我要Blob对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从Blob文件创建Base64字符串，如上面的代码？

Answer 1

 var reader = new FileReader();  reader.readAsDataURL(blob);   reader.onloadend = function() {      var base64data = reader.result;                      console.log(base64data);  }将文档 readAsDataURL编码形式为base64

Answer 2

这对我有用：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);};

Answer 3

所以问题是你想要上传一个基础64图像，你有一个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);}      });  }