Question

我有一张显示我的网络摄像头的画布的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，但我需要通过网络发送网络摄像头数据。

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

没关系，它坚持使用此线程Display image from blob using javascript and websockets中的指令并使我的服务器转换为原始（尚未）未修改的BinaryWebSocketFrames。

现在我仍在与画布（＆lt; 1fp）的糟糕表现作斗争，但这可能成为新主题的主题。

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

HTML5 / Javascript - DataURL到Blob＆amp; Blob到DataURL

3 个答案: