画像を表すオブジェクトの相互変換

画像を表すオブジェクトの相互変換

[1] Web では画像は色々なオブジェクトとして表現できます。 相互に変換できる経路が存在するかもしれませんし、難しいかもしれません。

x
入力
data
data: URL
arraybuffer
ArrayBuffer, ArrayBufferView
imagedata
ImageData
blob
Blob
bloburl
blob: URL
file
<input type=file>
dnd
DataTransfer
img
img
canvas
canvas, 2d
video
video
bitmap
ImageBitmap
x
data: URL
data
-
img
src
blob
XHR/fetch では不可 (SOP)
arraybuffer
XHR/fetch では不可 (SOP)
x
ArrayBuffer, ArrayBufferView
arraybuffer
-
imagedata
コンストラクター
blob
コンストラクター
x
ImageData
imagedata
createImageData
bitmap
createImageBitmap
arraybuffer
data
canvas
putImageData
x
Blob
blob
コンストラクター
bloburl
createObjectURL
bitmap
createImageBitmap
x
blob: URL
bloburl
-
img
src
blob
XHR/fetch
arraybuffer
XHR/fetch
x
<input type=file>
file
-
blob
files
x
DataTransfer
dnd
-
blob
files
x
img
img
-
canvas
drawImage
bitmap
createImageBitmap
x
canvas, 2d
data
toDataURL
blob
toBlob
canvas
drawImage
bitmap
createImageBitmap
imagedata
getImageData
x
video
video
-
canvas
drawImage
bitmap
createImageBitmap
x
ImageBitmap
bitmap
createImageBitmap
canvas
drawImage

[2] 他に atob/btoa もあります。