了解ImageData.data

    简介

    只读。是一个包含RGBA像素信息的Uint8ClampedArray,数组中所有的值都是整数,范围是0~255(包括0255)。

    一个像素点占据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] 表示该点的透明度值
    }

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'ImageData.data'
    现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-15 23:55:00