Webにおける画像

画像 (Web)

文脈

オブジェクト

[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ブラウザー (や起源や閲覧文脈) は、画像無効に設定することができます。画像が有効か否かは次の場面に影響します。

object

処理

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

レンダリング

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

[10] drawImage

歴史

[11] 影鷹は、横書き前提のページを縦書き表示するため、画像を発見的基準で回転させていました。

[1] Surfin’ Safari - Blog Archive » High DPI Web Sites (2010-07-06 22:35:10 +09:00 版) http://webkit.org/blog/55/high-dpi-web-sites/

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