HTML5/Javascript - DataURL到Blob和Blob到DataURL

Question

我從顯示我的攝像頭的畫布上獲取DataURL。我把這個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

沒關係，它堅持遵循這個線程Display image from blob using javascript and websockets中的指令並使我的服務器轉發未修改的BinaryWebSocketFrames。

現在我仍然對畫布表現不好（< 1fp），但這可能成爲新線程的主題。

Answer 2

使用我的代碼在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); 
});