BLOB URL とは何ですか? また、なぜ使用されるのですか? 質問する

BLOB URL とは何ですか? また、なぜ使用されるのですか? 質問する

URLに問題がありますblob

srcYouTube でタグを検索していたところ、次のようなvideoビデオを見つけました:src

src="blob:https://video_url"

blob動画内の URLを開いたのですsrcが、エラーが発生しました。リンクは開けませんが、srcタグは機能していました。どうしてこんなことが起こるのでしょうか?

いくつかの質問を聞きたいんです:

  • URLとは何ですかblob?
  • なぜ使用されるのですか?
  • blobサーバー上に独自の URL を作成できますか?

URLに関する追加の詳細もblob役立ちます。

ベストアンサー1

BLOB URL(参照ウィキペディア、正式名称) またはオブジェクト URL (ref.翻訳およびメソッド名)は、ブロブまたはファイル物体。

blob動画内の URLを開いたのですsrcが、エラーが発生しました。リンクは開けませんが、srcタグは機能していました。どうしてこんなことが起こるのでしょうか?

BLOB URL はブラウザによって内部的にのみ生成されます。URL.createObjectURL()BlobまたはFileオブジェクトへの特別な参照を作成し、後で次のように解放することができます。URL.revokeObjectURL()これらの URL は、ブラウザの単一のインスタンス内、および同じセッション内 (つまり、ページ/ドキュメントの有効期間内) でのみローカルに使用できます。

URLとは何ですかblob? なぜ使用されるのですか?

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

たとえば、Image オブジェクトに生のバイトデータを渡すことはできません。そのデータをどう処理すればよいか分からないからです。たとえば、画像 (バイナリ データ) は URL 経由で読み込む必要があります。これは、ソースとして URL を必要とするすべてのものに当てはまります。バイナリ データをアップロードして URL 経由で返すのではなく、サーバーを経由せずにデータに直接アクセスできるように、追加のローカル ステップを使用する方が適切です。

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

blobサーバー上に独自の URL を作成できますか?

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

URLに関する追加の詳細も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

おすすめ記事