将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字符串，如上面的代码？

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

将文档 readAsDataURL编码为base64

这为我工作：

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

有一种不依赖任何堆栈的纯JavaSript方法：

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

为了使用此辅助函数，您应该设置一个回调，例如：

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

我为React Native项目上的问题编写了此辅助函数，我想下载一个图像，然后将其存储为缓存的图像：

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

要么

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

请参见Response的构造函数，您可以将其[blob, buffer source form data, readable stream, etc.]转换为Response，然后可以[json, text, array buffer, blob]使用异步方法/回调将其转换为。

编辑：正如@Ralph提到的那样，将所有内容都转换为utf-8字符串会引起问题（不幸的是，Response API没有提供将其转换为二进制字符串的方式），因此将数组缓冲区用作中间变量，这需要两个步骤（将其转换为字节数组，然后将其转换为二进制字符串）（如果您坚持使用本机btoa方法）。

您可以通过以下方法解决问题：

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

希望对您有帮助

因此，问题在于您要上传基本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);}
     });
 }

一行代码中最简单的方法

var base64Image = new Buffer（blob，'binary'）.toString（'base64'）;