图像显示原理（一）

平时工作中我们会遇到各种各样的图片，常规的图片分为两种格式，即位图和矢量图。位图就是根据像素进行展示，一个像素点中包含了颜色，明暗度和透明度等信息。我们常见的位图格式有 BMP, PNG,JPG,GIF 等。

一 BMP图片

最原始的图像格式，完全将像素元素转换成数据，以下面的图片为例。由于 BMP 格式完全存储了每一个像素的所有数据，通常它占用较多的内存，我们可以通过 图片格式转换器 将一副普通图片转换成 BMP 格式图片。

一幅图片常见的原始数据包括尺寸，分辨率(dpi,lpi,ppi,PPD 等)，大小，色彩空间(RGB,CMY,LAB,YUV,HSI 等等)。

在 BMP 格式文件中，前 14 个字节主要是描述文件信息结构体

字段	地址段(字节)	描述
file_type	0 ~ 2	文件标识，表明文件格式
file_size	2 ~ 6	文件大小
reserved1	6 ~ 8	保留字 1
reserved2	8 ~ 10	保留字 2
offset_bits	10~14	偏移量

然后 40 个字节主要是图像显示信息

字段	地址段(字节)	描述
bitmap_info_size	14 ~ 18	位图信息的大小
bitmap_width	18 ~ 22	位图宽度
bitmap_height	22 ~ 26	位图高度
planes	26 ~ 28	位图的位面数
image_depth	28~30	位图的图像深度，表示位图数据中，几个二进制位表示一个像素点
compression	30~34	位图压缩方式
image_size	34~38	位图的数据大小
x_pels_permeter	38 ~ 42	指定位图目标设备的水平打印分辨率
y_pels_permeter	42 ~ 46	指定位图目标设备的垂直打印分辨率
color_used	46 ~ 50	位图实际使用调色板的颜色数量
color_important	50 ~ 54	重要的颜色数量

1.1 图像数据解析

我们可以通过 node 调用 fs 模块获取文件原始数据：

const originData = fs.readFileSync('../source/koubei.bmp');

默认 fs 通过 8 进制的形式进行内容输出，为了方便我们查看，将数据转换为 16 进制显示。

const data = origin.toString('hex');

截取部分图像数据

424d46881200000000003600000028000000d6010000860200000100200000000000000000002516000025160000000000000000000086d03aff86d03aff86d13aff86d13aff85d03aff85d03aff86d13aff86d13aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d03aff85d0