作者： 一去、二三里
个人微信号： iwaleon
微信公众号： 高效程序员
在之前的章节中，我们虽然学习了 Canvas 的基本绘图，但是却不清楚其背后真实的图像像素原理，因此无法深入地操作像素来实现一些高级的功能（例如：灰度处理）。
为了满足这一要求，QML 提供了一个 CanvasImageData 类型，它存储了图像的实际像素数据以及对应的尺寸，通过它可以很容易地进行图像处理。
完整的思维导图如下：
像素数据的原理
大家都知道，图片是一个平面图形，有宽度和高度。若以 1 像素为单位给它绘制一个网格，则一共有 width * height 个格子，像下面这样：
对于每个像素来说，它都有一种颜色，通道值按照 RGBA 顺序依次排列（4 字节表示法）。因此，要在一个一维数组中存储一张图片，就需要 width * height * 4 个字节。
有关像素数据的具体排列方式，公式如下ÿ