跳到主要内容

认识

2024年06月19日
柏拉文
越努力，越幸运

一、认识​

ImageData 对象中存储着 canvas 对象真实的像素数据, 可以直接通过 ImageData 对象操纵像素数据，直接读取或将数据数组写入该对象中。

二、属性​

ImageData 包含几个只读属性: data、width、height

2.1 data​

ImageData.data Uint8ClampedArray 类型的一维数组，包含着 RGBA 红（Red）、绿（Green）、蓝（Blue）和 Alpha通道（Alpha） 格式的整型数据，范围在 0 至 255 之间（包括 255）。

2.2 width​

ImageData.width 图片宽度，单位是像素

2.3 height​

height 图片高度，单位是像素

三、计算​

3.1 像素点​

data 属性返回一个 Uint8ClampedArray，它可以被使用作为查看初始像素数据。每个像素用 4 个 1bytes 值 (按照红，绿，蓝和透明值的顺序; 这就是 RGBA 格式) 来代表。每个颜色值部份用 0 至 255 来代表。

因此，以 data[0] - data[4] 第一个像素点为例, 表示的颜色如下:

  • R(Red): data[0]

  • G(Green): data[1]

  • B(Blue): data[2]

  • A(Alpha): data[3] / 255

一个像素点组合而成的 rgba 值为: rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})

3.2 像素数组​

data 属性返回一个 Uint8ClampedArray，它可以被使用作为查看初始像素数据。每个像素用 4 个 1bytes 值 (按照红，绿，蓝和透明值的顺序; 这就是 RGBA 格式) 来代表。每个颜色值部份用 0 至 255 来代表。每个部份被分配到一个在数组内连续的索引，左上角像素的红色部份在数组的索引 0 位置。像素从左到右被处理，然后往下，遍历整个数组。

data Uint8ClampedArray 数组包含字节数据为: height × width × 4

data Uint8ClampedArray 数组最大索引值为: (height× width × 4)-1

3.3 像素数组大小​

Uint8ClampedArray.length 属性来读取像素数组的大小（以字节为单位）

const numBytes = imageData.data.length;

3.4 根据行、列读取某像素点​

根据行、列读取某像素点的 R/G/B/A 值的公式：

imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 0/1/2/3];