ImageData.data

了解ImageData.data

简介

只读。是一个包含RGBA像素信息的Uint8ClampedArray，数组中所有的值都是整数，范围是0~255（包括0和255）。

一个像素点占据ImageData.data返回数组4个值，从前往后依次表示R，G，B，A这四个值，也就是红色值，绿色值，蓝色值以及透明度值。前三个色值表示范围和CSS3中的RGBA颜色一样，但是透明度A却不一样，在这里A的范围也是0~255，在CSS中是0~1，因此，如果是50%透明度的红色，则是[255, 0, 0, 127]。

语法

imagedata.data;

案例

// 下面的ImageData()构造方法IE不支持，这里演示
var imagedata = new ImageData(256, 256);
// 返回的是一个长度为256 * 256 * 4的数组
imagedata.data;

ImageData.data这个数组中，每4个值表示一个像素点信息。这里，尺寸是256*256，因此，像素点个数就是256*256，每个像素点4个值表示，因此，最后的长度是256*256*4。我们实际开发对这些像素点信息进行遍历的时候，每次索引都是加4，类似这样：

for (var index = 0; index < imagedata.data.length; index += 4) {
    // imagedata.data[index]     表示该点的红色色值
    // imagedata.data[index + 1] 表示该点的绿色色值
    // imagedata.data[index + 2] 表示该点的蓝色色值
    // imagedata.data[index + 3] 表示该点的透明度值
}

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:44:15