HTML5/Javascript - DataURL到Blob和Blob到DataURL

Question

我有一个显示我的网络摄像头的画布的DataURL.我使用Matt的答案将此dataURL转换为blob:如何在javascript中将dataURL转换为文件对象？

如何将此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线程 Display image from blob 中的说明并使我的服务器转发原始（尚未）未修改的 BinaryWebSocketFrames 后，它最终工作了。

现在我仍在与画布的不良性能（<1fp）作斗争，但这可能会成为新线程的主题。