引数で指定されたオブジェクトを表す URL を含む DOMString を生成します。→●、MS

URL の寿命は、それを作成したウィンドウ内の document と結び付けられています。新しいオブジェクト URL は、指定された File オブジェクトか Blob オブジェクトを表します。

オブジェクト URL を解放するには、revokeObjectURL() を呼び出してください。

注： この機能は Web Worker 内で利用可能です

メモ： この機能はメモリ･リークを生み出す可能性があるため、サービス･ワーカー内で利用することはできません。

構文

戻り値

object で指定された内容を参照するために使用されるオブジェクト URL を含んだ DOMString です。

例

function handleFiles() {
  if (!this.files.length) {
    fileList.innerHTML = "<p>ファイルが選択されていません。</p>";
  } else {
    fileList.innerHTML = "";
    const list = document.createElement("ul");
    fileList.appendChild(list);
    for (let i = 0; i < this.files.length; i++) {
      const li = document.createElement("li");
      list.appendChild(li);

      const img = document.createElement("img");
      img.src = URL.createObjectURL(this.files[i]);
      img.height = 60;
      img.onload = function() {
        URL.revokeObjectURL(this.src);
      }
      li.appendChild(img);
      const info = document.createElement("span");
      info.innerHTML = this.files[i].name + ": " + this.files[i].size + " バイト";
      li.appendChild(info);
    }
  }
}

使用上のメモ

メモリ管理

すでにオブジェクト URL が生成されている場合でも、createObjectURL() を呼び出す度に、新しいオブジェクト URL が生成されます。必要がなくなったら URL.revokeObjectURL() を呼び出して、それぞれを解放してください。

ブラウザーは、文書がアンロードされた際にこれらのオブジェクト URL をメモリから解放します。しかし、性能とメモリ使用を考慮すると、明示的にアンロードできる安全な機会があるならば、そうするべきです。

メディアストリームのオブジェクト URL の使用

古いバージョンの Media Source 仕様書では、<video> 要素にストリームを添付するには MediaStream にオブジェクト URL を生成する必要があるとしてます。これはもう必要なく、ブラウザーはこのようにする対応を削除してきています。

重要： もし createObjectURL() でメディア要素にストリームを割り当てるコードが残っているのであれば、単純に srcObject を直接 MediaStream に設定するよう更新する必要があります。

テスト