web-dev-qa-db-ja.com

HTML5 / Javascript-BlobへのDataURLおよびDataURLへのBlob

ウェブカメラを表示するキャンバスからのDataURLがあります。ここからマットの答えを使用して、このdataURLをblobに変換します。 javascriptでdataURLをファイルオブジェクトに変換する方法？

このblobを同じDataURLに戻すにはどうすればよいですか？私はこれを研究するのに1日を費やしましたが、盲目でない限り、これはより良く文書化されていないことを確信しています。

編集：あります

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

ただし、ローカルファイルを指しているように見える本当に短いURLのみを返しますが、Webカメラデータをネットワーク経由で送信する必要があります。

javascripthtml5blob
26
spacecoyote

決して気にせず、このスレッドの指示に固執した後、機能しました javascriptとwebsocketsを使用してblobから画像を表示 、未処理の（まだ）未変更のBinaryWebSocketFramesをサーバーに転送します。

現在、私はまだキャンバスの悪いパフォーマンス（<1fp）と戦っていますが、それは新しいスレッドの対象になるかもしれません。

1
spacecoyote

コードを使用して、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);
});
53
cuixiping