Javascript 将blob转换为base64

这是我想对

Blob

to

Base64

string执行的代码片段：

此注释部分起作用，当由此生成的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 canvas = $('#canvas'); 
var b64Text = canvas.toDataURL();
b64Text = b64Text.replace('data:image/png;base64,','');
var base64Data = b64Text;

---

我希望这对您有所帮助

所以问题是您想要上传一个base 64图像，并且您有一个blob url。现在，适用于所有html 5浏览器的答案是：

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

做：

或

请参阅，您可以将

[blob、缓冲区源表单数据、可读流等]

转换为，然后可以使用异步方法/回调将其转换为

[json、文本、数组缓冲区、blob]

---

编辑：正如@Ralph所提到的，将所有内容转换为utf-8字符串会导致问题（不幸的是，响应API没有提供转换为二进制字符串的方法），因此将其用作中介，这需要另外两个步骤（将其转换为字节数组，然后转换为二进制字符串），如果您坚持使用本机

btoa

方法。

有一种纯JavaSript方法，它不依赖于任何堆栈：

const blobToBase64=blob=>{
const reader=new FileReader（）；
reader.readAsDataURL（blob）；
返回新承诺（解决=>{
reader.onloadend=（）=>{
解析（reader.result）；
};
});
};

要使用此帮助器函数，应设置回调，例如：

blobToBase64（blobData）。然后（res=>{
//做你想做的
console.log（res）；//res现在是base64
});

---

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

fetch（imageAddressAsStringValue）
.then（res=>res.blob（））
.然后（blobToBase64）
.然后（最终结果=>{
storeOnMyLocalDatabase（finalResult）；
});

我想要一些可以访问base64值的东西，以便存储到列表中，并为我添加事件侦听器。您只需要FileReader，它将读取图像blob并在结果中返回base64

createImageFromBlob(image: Blob) {
    const reader = new FileReader();
    const supportedImages = []; // you can also refer to some global variable
    reader.addEventListener(
      'load',
      () => {
        // reader.result will have the required base64 image
        const base64data = reader.result;
        supportedImages.push(base64data); // this can be a reference to global variable and store the value into that global list so as to use it in the other part
      },
      false
    );
    // The readAsDataURL method is used to read the contents of the specified Blob or File.
    if (image) {
      reader.readAsDataURL(image);
    }
 }

---

最后一部分是readAsDataURL，它非常重要，用于读取指定Blob的内容

另一种方法是在

文件读取器

周围使用一个简单的包装器返回

可观察的

（代码片段位于

类型脚本

）：

异步函数blobToBase64（blob）{
返回新的承诺（（解决，)）=>{
const reader=new FileReader（）；
reader.onloadend=（）=>解析（reader.result）；
reader.readAsDataURL（blob）；
});
}
设blob=null；//log（base64String））；

另见：

---

异步类型脚本变化：

async function blobToBase64Async(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onerror = (e) => reject(fileReader.error);
    fileReader.onloadend = (e) => {
      const dataUrl = fileReader.result as string;
      // remove "data:mime/type;base64," prefix from data url
      const base64 = dataUrl.substring(dataUrl.indexOf(',') + 1);
      resolve(base64);
    };
    fileReader.readAsDataURL(blob);
  });
}

异步函数blobToBase64Async（blob:blob）：承诺{
返回新承诺（（解决、拒绝）=>{
const fileReader=new fileReader（）；
fileReader.onerror=（e）=>拒绝（fileReader.error）；
fileReader.onloadend=（e）=>{
const dataUrl=fileReader.result作为字符串；
//从数据url中删除“data:mime/type；base64”前缀
const base64=dataUrl.substring（dataUrl.indexOf（'，'）+1）；
解决（base64）；
};
fileReader.readAsDataURL（blob）；
});
}

示例用法：

async function fetchToBase64Async(url: string, init?: RequestInit): Promise<string> {
  try {
    const response = await fetch(url, init);
    if (!response.ok) {
      const responseText = await response.text();
      throw new Error("server status: " + response.status + "\n" + "server response:" + "\n" + responseText);
    }
    const blob = await response.blob();
    const base64 = await blobToBase64Async(blob);
    return base64;
  } catch (e) {
    throw new Error("failed to fetch: " + url + "\n" + "caused by: " + e);
  }
}

async function demoUsage() {
  const base64 = await fetchToBase64Async("https://httpstat.us/200", {
    method: "POST",
    headers: {
      "Accept": "*/*",
      "Authorization": "Bearer ...",
    }
  });
  console.log(base64);
}

异步函数fetchToBase64Async（url:string，init？：RequestInit）：Promise{ 试一试{ const response=wait fetch（url，init）； 如果（！response.ok）{ const responseText=等待响应.text（）； 抛出新错误（“服务器状态：“+response.status+”\n“+”服务器响应：“+”\n“+responseText”）； } const blob=wait response.blob（）； const base64=等待blobToBase64Async（blob）； 返回base64； }捕获（e）{ 抛出新错误（“由于“+e”导致无法获取“+url+”\n“+”）； } } 异步函数demoUsage（）{ const base64=等待fetchToBase64Async（“https://httpstat.us/200", { 方法：“张贴”， 标题：{ “接受”：“*/*”， “授权”：“持票人…”， } }); console.log（base64）； } 注:
• 我不明白为什么有些答案使用事件而不是事件
• 我不明白为什么有些答案会在设置事件处理程序之前调用

---

输出字符串看起来不像base64？@xybrek如果您打印read.result，您将在字符串本身的.console.log（base64data.substr（base64data.indexOf（'，'）+1）中看到base64

onloadend

应该在

readAsDataURL

之前，以防发生奇怪的事情，并且它在到达下一行代码之前完成加载。显然，这永远不会发生，但它仍然是一种良好的做法。这个答案是错误的，它在字符串的前面附加了none-base64字符。参数是什么？@FellowStranger通常回调，像blobToBase64（myBlob，函数（base64String）{/*使用base64String*/}），因为它是async@yeahdixon,看来我需要你的帮助。看看这个：你如何等待执行？我总是未定义回调是指当completeNice时调用的传递函数，@Vemonus因为FileReader作为base64暴露到结果属性中，工作非常完美..text（）使用UTF8解码，如果响应有二进制代码会发生什么？我相信这对于非文本数据来说是失败的。我明白你的观点，修改了答案（虽然它变得相当冗长）。在这一点上，最好不要坚持

btoa

createImageFromBlob(image: Blob) {
    const reader = new FileReader();
    const supportedImages = []; // you can also refer to some global variable
    reader.addEventListener(
      'load',
      () => {
        // reader.result will have the required base64 image
        const base64data = reader.result;
        supportedImages.push(base64data); // this can be a reference to global variable and store the value into that global list so as to use it in the other part
      },
      false
    );
    // The readAsDataURL method is used to read the contents of the specified Blob or File.
    if (image) {
      reader.readAsDataURL(image);
    }
 }

  function toBase64(blob: Blob): Observable<string> {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    return fromEvent(reader, 'load')
      .pipe(map(() => (reader.result as string).split(',')[1]));
  }

toBase64(blob).subscribe(base64 => console.log(base64));

async function blobToBase64Async(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onerror = (e) => reject(fileReader.error);
    fileReader.onloadend = (e) => {
      const dataUrl = fileReader.result as string;
      // remove "data:mime/type;base64," prefix from data url
      const base64 = dataUrl.substring(dataUrl.indexOf(',') + 1);
      resolve(base64);
    };
    fileReader.readAsDataURL(blob);
  });
}

async function fetchToBase64Async(url: string, init?: RequestInit): Promise<string> {
  try {
    const response = await fetch(url, init);
    if (!response.ok) {
      const responseText = await response.text();
      throw new Error("server status: " + response.status + "\n" + "server response:" + "\n" + responseText);
    }
    const blob = await response.blob();
    const base64 = await blobToBase64Async(blob);
    return base64;
  } catch (e) {
    throw new Error("failed to fetch: " + url + "\n" + "caused by: " + e);
  }
}

async function demoUsage() {
  const base64 = await fetchToBase64Async("https://httpstat.us/200", {
    method: "POST",
    headers: {
      "Accept": "*/*",
      "Authorization": "Bearer ...",
    }
  });
  console.log(base64);
}