Agile育成ブログ
未来を変える喜びを
javascript

URL.createObjectURL()


Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

URL.createObjectURL() 静的メソッドは、引数で指定されたオブジェクトを表す URL を含む DOMString を生成します

オブジェクトURLの作成

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

const objectUrl = URL.createObjectURL( obj );

取得したオブジェクト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オブジェクトから、データを取得します。

You cannot copy content of this page