HTML5 / Javascript - DataURL 到 Blob 和 Blob 到 DataURL

Question

我有一个来自画布的 DataURL，显示了我的网络摄像头。我使用 Matt 的答案将此 dataURL 转换为 blob：How to conversion dataURL to file object in javascript?

如何将此 blob 转换回相同的 DataURL？我花了一天时间研究这个，我很惊讶这个没有更好的记录，除非我是盲人。

编辑： 有

var urlCreator = window.URL || window.webkitURL; 
var imageUrl = urlCreator.createObjectURL(blob); 

但它只返回一个非常短的 URL，似乎指向本地文件，但我需要通过网络发送网络摄像头数据。

Answer 1

使用我的代码在 JavaScript 中的 dataURL 和 blob 对象之间进行转换。 （比您链接中的代码更好。）

//**dataURL to blob**
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

//**blob to dataURL**
function blobToDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function(e) {callback(e.target.result);}
    a.readAsDataURL(blob);
}

//test:
var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');
blobToDataURL(blob, function(dataurl){
    console.log(dataurl);
});

Answer 2

这是一个基于

Promise

的 Typescript 版本，具有正确的错误检查功能。

function blobToDataURL(blob: Blob): Promise<string> {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = _e => resolve(reader.result as string);
    reader.onerror = _e => reject(reader.error);
    reader.onabort = _e => reject(new Error("Read aborted"));
    reader.readAsDataURL(blob);
  });
}

Answer 3

没关系，在坚持此线程中的说明后，它最终工作了使用javascript和websockets显示来自blob的图像并使我的服务器转发原始（尚未）未修改的BinaryWebSocketFrames。

现在我仍在与画布的不良性能作斗争（<1fp) but that might become subject of a new thread.

Answer 4

DataURL to Blob 有更好的解决方案：

const dataURL = "dataURL string...";
const res = await fetch(dataURL);
const blob = await res.blob();

Answer 5

我喜欢单行代码，所以这里有一个基于

Promise

的单行代码，用于将 blob 转换为数据 URL：

let blob = ...;
let dataUrl = await new Promise(r => {let a=new FileReader(); a.onload=r; a.readAsDataURL(blob)}).then(e => e.target.result);

或者，作为一个函数：

function blobToDataUrl(blob) {
  return new Promise(r => {let a=new FileReader(); a.onload=r; a.readAsDataURL(blob)}).then(e => e.target.result);
}

let dataUrl = await blobToDataUrl(blob);

Answer 6

角度

如果使用Angular，可以使用Observables：

blobToDataURL(blob: Blob): Observable<string> {
    return new Observable((subscriber) => {
      const fr = new FileReader();
      fr.onload = () => subscriber.next(fr.result as string);
      fr.onerror = () => subscriber.next(fr.error?.message);
      fr.readAsDataURL(blob);
      subscriber.complete();
    })
  }