HTML5/Javascript - DataURL zu Blob & Blob zu DataURL

Question

Ich habe eine DataURL von einer Leinwand, die meine Webcam zeigt. Ich verwandle diese Daten URL in einen Blob mit Matts Antwort von hier: How to convert dataURL to file object in javascript?

Wie konvertiere ich dieses Blob zurück in die gleiche DataURL? Ich habe einen Tag damit verbracht, dies zu erforschen, und ich bin davon überzeugt, dass dies nicht besser dokumentiert ist, es sei denn, ich bin blind.

EDIT: Es gibt

var urlCreator = window.URL || window.webkitURL; 
var imageUrl = urlCreator.createObjectURL(blob); 

aber es gibt nur eine wirklich kurze URL, die in einer lokalen Datei zu zeigen scheint, aber ich brauche die Webcam Daten über ein Netzwerk zu senden.

Answer 1

Nevermind, es funktionierte nach dem Befolgen der Anweisungen in diesem Thread Display image from blob using javascript and websockets und machen meinen Server weiter rohe (noch) unmodifizierte BinaryWebSocketFrames.

Jetzt kämpfe ich immer noch schlechte Leistung der Leinwand (< 1fp), aber das könnte Gegenstand eines neuen Threads werden.

Answer 2

Verwenden Sie meinen Code, um zwischen DataURL und Blob-Objekt in Javascript zu konvertieren. (Besser als der Code in Ihrem Link.)

//**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); 
});