ImageData
接口描述 <canvas>
元素的一个隐含像素数据的区域。使用 ImageData()
构造函数创建或者使用和 canvas 在一起 CanvasRenderingContext2D
对象的创建方法: createImageData()
和 getImageData()
。也可以使用 putImageData()
设置 canvas 的一部分。
构造函数
-
使用给定的
Uint8ClampedArray
创建一个ImageData
对象,并包含图像的大小。如果不给定数组,会创建一个黑色矩形图像。注意,这是最常见的方式去创建这样一个对象,在createImageData()
不可用时。
ImageData()
属性
-
Uint8ClampedArray
描述了一个一维数组,包含以 RGBA 顺序的数据,数据使用0
至255
(包含)的整数表示。 data属性返回一个Uint8ClampedArray
,它可以被使用作为查看初始像素数据。每个像素用4个1bytes值(按照红,绿,蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。每个颜色值部份用0至255来代表。每个部份被分配到一个在数组内连续的索引,左上角像素的红色部份在数组的索引0位置。像素从左到右被处理,然后往下,遍历整个数组。 -
无符号长整型(
unsigned
long
),使用像素描述 ImageData 的实际高度。
ImageData.data
只读
ImageData.height
只读
ImageData.width
只读
无符号长整型(unsigned
long
),使用像素描述 ImageData 的实际宽度。
包含高度 × 宽度 × 4 bytes数据,索引值从0到(
Uint8ClampedArray高度
×宽度×4)-1
例如,从行50,纵200的像素中读取图片的蓝色部份,你会写以下代码:
blueComponent = imageData.data[((50*(imageData.width*4)) + (200*4)) + 2];
你可能用会使用Uint8ClampedArray.length属性来读取像素数组的大小(以bytes为单位):
var numBytes = imageData.data.length;
创建一个ImageData对象
去创建一个新的,空白的ImageData对象
,你应该会使用createImageData()
方法。有2个版本的createImageData()方法。
var myImageData = ctx.createImageData(width, height);
上面代码创建了一个新的具体特定尺寸的ImageData对象
。所有像素被预设为透明黑。
你也可以创建一个被anotherImageData对象
指定的相同像素的ImageData对象
。这个新的对象
像素全部被预设为透明黑。这个并非复制了图片数据。