画像

画像 (Web)

文脈

[7]

オブジェクト

[3] 画像を表すオブジェクトは色々あります。

[4] 相互変換:

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

画像形式

[6] 画像形式image/* を参照。

設定

[2] Webブラウザー (や起源閲覧文脈) は、画像無効に設定することができます。 画像が有効か否かは次の場面に影響します。

処理

[8] SVGの静的表示も参照。

レンダリング

[9] レンダリングの更新も参照。

[10] drawImage

歴史

[1] Surfin’ Safari - Blog Archive » High DPI Web Sites ( 版) <http://webkit.org/blog/55/high-dpi-web-sites/>

[5] JPEGの脆弱性突いたさらに危険なコードが公開 - ITmedia エンタープライズ ( 版) <http://www.itmedia.co.jp/enterprise/articles/0409/24/news006.html>