LCD屏幕显示PNG图像
这段时间在学习正点原子的IMX6ULL开发板，在应用编程中有一个代码练习是需要在LCD屏幕上显示PNG图像，但由于我的屏幕参数和教程中的有些出入，于是经过自己查阅和修改，终于成功在自己的LCD屏幕上显示PNG图像。
正点原子LCD屏幕显示PNG图像
本文概要
这段时间在学习正点原子的IMX6ULL开发板，在应用编程中有一个代码练习是需要在LCD屏幕上显示PNG图像，但由于我的屏幕参数和教程中的有些出入，于是经过自己查阅和修改，终于成功在自己的LCD屏幕上显示PNG图像。
LCD 屏幕参数
我的LCD参数如下所示：
这里面出现一个问题，我的屏幕参数显示的是32位，但是实际上RGBA的位数只有24位。那么多出来的8位是什么呢？起初我以为是透明度A，但是参数显示的是透明度所占位数为0。
后面我猜测这8位可能不是RGBA中的一种，而是用来数据对齐的一种方式。由于和我们的代码主体无关，所以后面也就不管它了。
总而言之，这几个参数就是LCD显示中最重要的参数：
屏幕分辨率：1024*600
像素深度：32位
像素格式：RGB888
代码流程
zlib和libpng库
zlib和libpng库是PNG图像的解析库，在Linux系统中直接下载源码然后编译移植到开发板文件系统即可。
zlib库下载地址： https://www.zlib.net/fossils/
libpng库下载地址：https://github.com/glennrp/libpng/releases
其中libpng也有帮助文档：http://www.libpng.org/pub/png/libpng-1.4.0-manual.pdf
这里我使用的是zlib-1.2.10 和 libpng-1.6.35，版本根据自己的需求选择。
解析图像流程
使用libpng库解析图像的流程基本是固定的，无非就是：
-
获取文件描述符：打开PNG图像文件获取文件描述符
-
解码对象：使用
png_create_read_struct函数创建png_structp结构体指针，即为解码对象。解码对象在后续操作中就相当于一个句柄的作用； -
图像信息对象：使用
png_create_info_struct函数创建png_infop结构体指针，即为图像信息对象，用于存储图像的宽、高等属性； -
错误处理：使用
setjmp(png_jmpbuf(png_ptr))设置错误处理，这里setjmp函数的作用就是设置错误跳点，当发送错误时就跳到这里来执行后续函数； -
指定数据源：使用
png_init_io函数设置数据源，表明我们要解码的就是这个图像文件； -
读取图像信息：这里使用
png_read_png()函数来直接读取PNG图像信息，这个函数会自动开辟一个内存空间用来存储图像信息。因为这个内存信息和png_structp结构体对象绑定了，所以后续可以用png_get_rows()函数来获取该内存地址； -
获取图像数据： 使用
png_get_rows()函数获取图像数据，并返回一个png_bytep类型的指针，指向的是图像数据中每一行的地址，所以该指针指向的是一个数组，数组每个元素是图像数据中一行的数据，元素大小为image_width*bytes_per_pixel/8； -
转换为RGB888格式：这里外层循环的作用是遍历图像数据的每一行，内存循环的作用是遍历图像数据的每一列。并且用指针
png_bytep px指向图像数据中每3个数据为一组的地址，指针unsigned char *dst指向图像显存地址中每4个数据为一组的地址，然后对RGB进行数据转换，这里为什么是将RGB的顺序互换，我也不太清楚，可能与图片原先的RGB格式有关，反正只要转换为LCD屏幕的RGB格式就好；
点击查看代码
/* 将24位RGB图像转换为32位RGB888格式 */
for (int y = 0; y < image_height; y++) {
for (int x = 0; x < image_width; x++) {
png_bytep px = &(row_pointers[y][x * 3]);
unsigned char *dst = &image_data[(y * image_width + x) * 4];
dst[0] = px[2]; // R
dst[1] = px[1]; // G
dst[2] = px[0]; // B
dst[3] = 0xFF; // A (Alpha channel set to 255)
}
}
- 分配内存并写入显存：使用
malloc()函数分配内存，并使用memcpy()函数将图像数据写入内存中；
点击查看代码
/* 将图像数据写入显存 */
for (int y = 0; y < image_height && y < screen_height; y++) {
memcpy(screen_base + y * line_length, image_data + y * image_width * 4, image_width * 4);
}
- 释放内存：使用
free()函数释放内存。
最终显示效果
显示效果如下：
总结与对比
相较于教程的代码流程，卡住我的主要就是理解我的LCD屏幕为32位的含义所在，不是RGBA，而是有8位作为数据对齐。以及还有转化为RGB888格式的代码，但是这个我是交给Copilot自动生成了，在这里狠狠安利一波Copilot！！
其实理解了代码的含义也不难，最重要的就是掌握好libpng库的使用框架和API，当然还有图像的存储方式：图像的image_width和image_height指的是图像的宽和高分别有多少个像素点，而图像的存储是按行优先排列的，所以用png_get_rows()函数获取的是指向图像数据一行一行地址的指针，其实可以当作是一个二维矩阵来看，所以通过两层循环也就可以遍历图像数据了。
