Canvas ImageData 对象

终于快接近尾声了,要准备鲜花庆祝下了,之前的章节,我们都学习如何绘图,如何让图像动起来,如何响应用户的交互

是的,这没错,因为我们本来要的就是这些能力,但是我们还没有弄清楚 Canvas 真实的像素原理,我们只是绘了一些图形,然后展现出来,我们并没有深入的去操作或者获取图像背后的像素

我们可能需要导出当前画布上的绘制的东西,或者把绘制的东西赋给一个 <img> 元素让它显示出来

Canvas 能够提供这些操作,因为,它提供了一个 ImageData 对象来操作画布本身的像素能力

ImageData 对象

ImageData 对象中存储着 canvas 对象真实的像素数据

它提供了以下属性

属性 说明
ImageData.data 只读,Uint8ClampedArray 类型的一维数组,包含着 RGBA 格式的整型数据,范围在 0255 之间( 包括 255 )顺序的数据,
ImageData.height 只读,无符号长整型(unsigned long),图片高度,单位是像素
ImageData.width 只读,无符号长整型(unsigned long),图片宽度,单位是像素

Uint8ClampedArray

Uint8ClampedArray 是一个 高度 × 宽度 × 4 bytes 的一维数组

这是什么意思呢 ?

我们知道,图片是平面图形,有宽有高,因此我们可以把它看作是一个矩形

如果我们以 1 像素为单位给它绘制一个网格,下面这样

那么有多少个小格子呢 ?

不用去数啊,直接是 (width / 1 ) x ( height/1 ) = width x height

然后每一个像素格子都是一种颜色,那么总共就有 width x height 个颜色了

我们知道颜色的存储有 3 字节表示法 ( RGB ) 和 四字节表示法 ( RGBA ) ,Canvas 使用的是 RGBA 存储一个颜色值,也即是一个颜色需要 4 字节来存储

所以,那么 Canvas 中存储一个张 width x height 的图片就需要 高度 × 宽度 × 4 bytes 字节了

既然知道了 Uint8ClampedArray 是一个 高度 × 宽度 × 4 bytes 的一维数组

那么它的索引值就是从 0(高度×宽度×4) -1

那么 Uint8ClampedArray 到底是是怎么存放每个像素的颜色呢?

很简单,首先创建一个长度为 (高度×宽度×4) 的字节数组,然后按照下面的公式存放第 m 行 n 列颜色(RGBA)

R = 4 * (m-1) * (n-1) + 0
G = 4 * (m-1) * (n-1) + 1
B = 4 * (m-1) * (n-1) + 2
A = 4 * (m-1) * (n-1) + 3

例如第一行第一列的颜色放在

R = 4 * 0 * 0 + 0 = 0
G = 4 * 0 * 0 + 1 = 1
B = 4 * 0 * 0 + 2 = 2
A = 4 * 0 * 0 + 3 = 3

第一行第二列的颜色放在

R = 4 * 1 * 1 + 0  = 4
G = 4 * 1 * 1 + 1  = 5
B = 4 * 1 * 1 + 2  = 6
A = 4 * 1 * 1 + 3  = 7

如果你看脑补不明白,那就看图吧

是不是很酷,是不是很有趣?

所以我们要取得第 m 行第 n 列颜色值的 B 值,就可以像下面这样使用

ImageData.data[(m-1)*(n-1)*4+3]

例如从行 50,列 30 的像素中读取图片的蓝色部份,就会这样写

blue = ImageData.data[(50-1)*(30-1)*4+3] = ImageData.data[7647]

获取 Uint8ClampedArray 的长度

既然 Uint8ClampedArray 是一个数组,我们就可以使用 length 属性来获得数组的长度

var len = imageData.data.length

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.