webentwicklung-frage-antwort-db.com.de

HTML5/Javascript - DataURL zu Blob und Blob zu DataURL

Ich habe eine DataURL von einer Leinwand, die meine Webcam zeigt. Ich verwandle diese dataURL in einen Fleck mit Matt's Antwort von hier: Wie konvertiere ich dataURL in ein Dateiobjekt in Javascript?

Wie konvertiere ich diesen Blob wieder in dieselbe DataURL? Ich habe einen Tag damit verbracht, dies zu erforschen, und ich bin überrascht, 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); 

es wird jedoch nur eine wirklich kurze URL zurückgegeben, die auf eine lokale Datei verweist, aber ich muss die Webcam-Daten über ein Netzwerk senden. 

19
spacecoyote

Nichtsdestotrotz hat es funktioniert, nachdem ich mich an die Anweisungen in diesem Thread gehalten habe Bild mit JavaScript und Websockets vom Blob anzeigen lassen und meinen Server dazu bringen, rohe (noch) unveränderte BinaryWebSocketFrames weiterzuleiten.

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

1
spacecoyote

Verwenden Sie meinen Code, um zwischen dataURL und ein 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);
});
43
cuixiping