[解決済み】BLOB URLとは何ですか、なぜ使われるのですか？

質問

blobのURLでいろいろと困っています。

を検索していたのですが src をYouTubeの動画タグで検索したら src のようでした。

src="blob:https://crap.crap"

にあったblob URLを開くと src の動画はエラーになりました。リンクを開けないのですが、動作していた src タグを使用します。これはどうしたことでしょうか？

要求事項

• blob URLとは何ですか？
• なぜ使用されるのですか？
• Blob URLをサーバーで自作することはできますか？
• その他詳細があれば

解決方法

ブロブURL（ref W3C , 正式名称）またはObject-URL（ref. MDN とメソッド名)を使用し ブロブ または ファイル オブジェクトを作成します。

src="blob:https://crap.crap" のsrcにあったblobのurlを開いてみました。 ビデオではエラーになり、開くことができませんが、srcで作業していました。 タグはどのように可能ですか？

Blob URLは、ブラウザが内部で生成することだけが可能です。 URL.createObjectURL() は、Blob または File オブジェクトへの特別な参照を作成し、後でそれを URL.revokeObjectURL() . これらのURLは、ブラウザの単一のインスタンスと同じセッション（つまり、ページ/ドキュメントの寿命）内でローカルにのみ使用できます。

blob urlとは何ですか？

なぜ使用されるのですか？

Blob URL/Object URLは、BlobやFileオブジェクトを、画像やバイナリデータのダウンロードリンクなどのURLソースとして使用できるようにするための疑似プロトコルである。

例えば、Imageオブジェクトに生のバイトデータを渡しても、それをどう扱えばいいのかわからないからです。例えば、画像（バイナリデータ）はURLで読み込む必要があります。これは、ソースとしてURLを必要とするものすべてに当てはまります。バイナリデータをアップロードし、URL経由でそれを提供する代わりに、サーバーを経由せずにデータに直接アクセスできるように、余分なローカルステップを使用する方がよいでしょう。

としてエンコードされた文字列であるData-URIのより良い代替手段でもあります。 ベース64 . Data-URIの問題は、JavaScriptで各文字が2バイトかかることです。その上、Base-64 エンコーディングのため 33% が追加されます。Blobsは純粋なバイナリバイト配列で、Data-URIのような大きなオーバーヘッドがないため、高速かつ小さく処理することができます。

サーバー上で独自のblob urlを作ることはできますか？

いいえ、Blob URL/Object URLはブラウザの内部でのみ作成できます。BLOBはBinary Large OBjectという意味で、バイト配列として格納されますが、File Reader APIを通じてBlobを作成し、Fileオブジェクトを取得することができます。クライアントはデータの送信をArrayBufferまたはBLOBとして要求することができます。サーバーは、データを純粋なバイナリデータとして送信する必要があります。データベースでは、バイナリオブジェクトを表現するためにBlobを使用することがよくありますが、本質的にはバイト配列のことを話しているのです。

もしあれば 追加の詳細

バイナリデータをBLOBオブジェクトとしてカプセル化する必要があります。 URL.createObjectURL() を使用して、それ用のローカルURLを生成します。

var blob = new Blob([arrayBufferWithPNG], {type: "image/png"}),
    url = URL.createObjectURL(blob),
    img = new Image();

img.onload = function() {
    URL.revokeObjectURL(this.src);     // clean-up memory
    document.body.appendChild(this);   // add image to DOM
}

img.src = url;                         // can now "stream" the bytes

なお URL は、webkit-browserでは接頭辞が付く場合があるので、使用してください。

var url = (URL || webkitURL).createObjectURL(...);