HTML5 / Javascript - DataURL 到 Blob 和 Blob 到 DataURL答案

【问题标题】：HTML5 / Javascript - DataURL to Blob & Blob to DataURLHTML5 / Javascript - DataURL 到 Blob 和 Blob 到 DataURL
【发布时间】：2014-06-02 17:45:06
【问题描述】：

我有一个来自画布的 DataURL，它显示了我的网络摄像头。我使用 Matt 的回答将这个 dataURL 变成了一个 blob：How to convert dataURL to file object in javascript?

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

编辑：有

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

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

【问题讨论】：

或者如果有人知道在 DataURL 和 Blob 之间转换的任何其他两种方法，我将非常感激。它在唠叨我。
是否有可能将 URL 转换为 blob，通过网络发送 blob 并再次将 blob 转换为 URL？我是不是有思维错误？
由于我尝试压缩 dataURL 字符串并以这种方式发送它似乎也失败了，所以我将允许自己再次遇到此问题。

标签： javascript html blob

【解决方案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);
});

【讨论】：

我认为FileReader 对我来说不是很明显的事情是在调用readAsDataURL 之前添加onload 事件

【解决方案2】：

没关系，在遵循此线程 Display image from blob using javascript and websockets 中的说明并让我的服务器转发原始（尚未）未修改的 BinaryWebSocketFrames 后，它最终工作了。

现在我仍在与画布的性能不佳（

【讨论】：

【解决方案3】：

这是一个基于 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);
  });
}

【讨论】：