ImageData

ImageData 接口描述 <canvas> 元素的一个隐含像素数据的区域。使用 ImageData() 构造函数创建或者使用和 canvas 在一起的 CanvasRenderingContext2D 对象的创建方法: createImageData()getImageData()。也可以使用 putImageData() 设置 canvas 的一部分。

构造函数

ImageData()
三个参数,第一个 是Uint8ClampedArray的实例,第二个和第三个表示的是width和height,必须保证Uint8ClampedArray的length = 4*width*height才不会报错,如果第一个参数Uint8ClampedArray没有的话,自动按照width和height的大小,以0填充整个像素矩阵。
使用给定的Uint8ClampedArray创建一个 ImageData 对象,并包含图像的大小。如果不给定数组,会创建一个“完全透明”(因为透明度值为0)的黑色矩形图像。注意,这是最常见的方式去创建这样一个对象,在 createImageData() 不可用时。

属性

ImageData.data 只读
Uint8ClampedArray 描述了一个一维数组,包含以 RGBA 顺序的数据,数据使用  0 至 255(包含)的整数表示。 
ImageData.height 只读
无符号长整型(unsigned long),使用像素描述 ImageData 的实际高度。
ImageData.width 只读
无符号长整型(unsigned long),使用像素描述 ImageData 的实际宽度。

规范描述

Specification Status Comment
HTML Living Standard
ImageData
Living Standard

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ImageDataChrome Full support 4Edge Full support 12Firefox Full support 14IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 14Opera Android Full support 10.1Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
ImageData() constructor
Experimental
Chrome Full support 42Edge Full support ≤18Firefox Full support 29IE No support NoOpera Full support 29Safari ? WebView Android No support NoChrome Android Full support 42Firefox Android Full support 29Opera Android ? Safari iOS ? Samsung Internet Android Full support 4.0
dataChrome Full support YesEdge Full support 12Firefox Full support 14IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 14Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
heightChrome Full support YesEdge Full support 12Firefox Full support 14IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 14Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
widthChrome Full support YesEdge Full support 12Firefox Full support 14IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 14Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Available in workersChrome Full support YesEdge Full support ≤79Firefox Full support 25IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 25Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

参见