More than 3 years have passed since last update.

createObjectURL( )

Posted at 2021-05-15

※プログラミング学習中の私がアップロードしてます。理解が浅いです。
この記事は厳密な仕様に関するものではなく、考え方理解のまとめとして受け取ってください。

オブジェクトURLとは

オブジェクトURLとは、オブジェクトに便宜的でユニークなIDを付け、そのIDとURLの種類を組み合わせた文字列です。
この文字列はブラウザがURLとして解釈でき、ブラウザがオブジェクトURLを管理する仕組みに渡すことで、対応するデータを取得できます。

オブジェクトURLの作成
File APIなどで取得したFileオブジェクトを、次のようにURL.createObjectURL()の引数に渡すと、オブジェクトURLを取得できます。

オブジェクトURLの取得

const objectUrl = URL.createObjectURL( obj );

※ObjはBlobオブジェクトを指定します。FileオブジェクトはBlobから派生しているので指定可能です。

取得したオブジェクトURLは、次のような"blob:"で始まる文字列です。

"blob:null/f79b06de-2072-4fe4-bb2b-a89383231a79"

後ろに続く文字列は、createObjectURL()が呼び出された時に他と重複しないように作成されます。
このときオブジェクトの同一確認をしていないので、同じオブジェクトでも呼び出すたびに異なるオブジェクトURLが作成されます。

Blobから作成したオブジェクトURLは、Blob URLストアにBlobオブジェクトへの参照とペアで格納されています。

Blob URLストア:{
Blob URL1:{ オブジェクトURL , Blobオブジェクトへの参照 }
Blob URL2:{ オブジェクトURL , Blobオブジェクトへの参照 }
・・・・
}

URLの参照行為、例えばimgタグのsrcにオブジェクトURLがセットされると、Blob URLストアから一致するものを検索してBlobオブジェクトから、データを取得します。

https://note.affi-sapo-sv.com/js-create-revoke-objecturl.php