首页 文章

HTML5 / Javascript - DataURL到Blob和Blob到DataURL

提问于
浏览 次
19

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

javascript html5 blob

2 回答

  • 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);
});
    回复于
  • 40

    没关系，它坚持工作，坚持这个线程Display image from blob using javascript and websockets中的指令，并使我的服务器转发原始（尚）未修改的BinaryWebSocketFrames .

    现在我仍然在对抗画布的不良性能（<1fp），但这可能成为新线程的主题 .

    回复于

相关问题