javascript - HTML5/Javascript - DataURL 到 Blob 和 Blob 到 DataURL

Question

我有一个来自显示我的网络摄像头的 Canvas 的 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);
});