blob: URL

blob:<origin>/<uuid>

blob:

この URL のスキーム。

<origin>

この URL の作成者のオリジンです。作成者のオリジンが不透明な場合、この部分は実装によって定義されます。

<uuid>

UUID です。

createObjectURL() を呼び出すたびに、同じオブジェクトに対してすでに URL が作成されている場合でも、新しいオブジェクト URL が作成されます。これらの URL は、必要がなくなった時点で、URL.revokeObjectURL() を呼び出して解放する必要があります。 1 つのオブジェクト URL がアクティブな状態である限り、基盤となるオブジェクトはガベージコレクションの対象とならず、メモリーリークを発生させる可能性があります。

ブラウザーは、文書がアンロードされるとオブジェクトの URL を自動的に解放しますが、パフォーマンスとメモリー使用量を最適化するには、明示的にアンロードできる安全な時点がある場合は、その時点でアンロードすることをお勧めします。

ただし、オブジェクトの URL を早すぎる段階で解放することは避けてください。よくあるアンチパターンは次のとおりです。

const url = URL.createObjectURL(blob);
img.src = url;
img.addEventListener("load", () => {
  URL.revokeObjectURL(url);
});
document.body.appendChild(img);

画像がレンダリングされた直後に blob URL を無効にすると、ユーザーは画像に対して操作（右クリックして画像を保存したり、新しいタブで開いたりなど）を行うことができなくなります。長寿命のアプリケーションでは、ユーザーがリソースにアクセスできなくなった場合（画像が DOM から削除された場合など）にのみ、オブジェクト URL を無効にする必要があります。

blob URL 経由のリソースへのアクセスは、他のすべてのストレージ機構と同じ制限、つまり状態の分割の対象となります。 blob URL には、関連付けられた作成元のオリジン（URL 自体に格納される）があり、作成元の環境とストレージキーが一致する環境からのみ取得できます。 blob URL のナビゲーションは、この制限の対象ではありませんが、ブラウザーは、 blob URL へのサイト間ナビゲーションに対して noopener などのプライバシー保護措置を適用する場合があります。

古いバージョンの Media Source 仕様書では、 <video> 要素にストリームを接続するには、 MediaStream のオブジェクト URL を作成する必要がありました。これはできなくなりました。また、ブラウザーではこの機能の対応が除去されつつあります。

この例では、まず Blob を <canvas> から作成し、それに　blob URL を作成し、最後にその URL を <img> 要素に添付します。

const canvas = document.querySelector("canvas");
canvas.toBlob((blob) => {
  const img = document.createElement("img");
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img);
});

• ウェブアプリケーションからのファイルの使い方
• 画像を表示するためのオブジェクト URL の使い方
• URL.createObjectURL()
• URL.revokeObjectURL()
• IANA リストの URI スキーム（英語）