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库解析图像的流程基本是固定的，无非就是：

1. 获取文件描述符：打开PNG图像文件获取文件描述符

2. 解码对象：使用png_create_read_struct函数创建png_structp结构体指针，即为解码对象。解码对象在后续操作中就相当于一个句柄的作用；

3. 图像信息对象：使用png_create_info_struct函数创建png_infop结构体指针，即为图像信息对象，用于存储图像的宽、高等属性；

4. 错误处理：使用setjmp(png_jmpbuf(png_ptr))设置错误处理，这里setjmp函数的作用就是设置错误跳点，当发送错误时就跳到这里来执行后续函数；

5. 指定数据源：使用png_init_io函数设置数据源，表明我们要解码的就是这个图像文件；

6. 读取图像信息：这里使用png_read_png()函数来直接读取PNG图像信息，这个函数会自动开辟一个内存空间用来存储图像信息。因为这个内存信息和png_structp结构体对象绑定了，所以后续可以用png_get_rows()函数来获取该内存地址；

7. 获取图像数据： 使用png_get_rows()函数获取图像数据，并返回一个png_bytep类型的指针，指向的是图像数据中每一行的地址，所以该指针指向的是一个数组，数组每个元素是图像数据中一行的数据，元素大小为image_width*bytes_per_pixel/8；

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)
    }
}

1. 分配内存并写入显存：使用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);
}

1. 释放内存：使用free()函数释放内存。

最终显示效果

显示效果如下：

总结与对比

相较于教程的代码流程，卡住我的主要就是理解我的LCD屏幕为32位的含义所在，不是RGBA，而是有8位作为数据对齐。以及还有转化为RGB888格式的代码，但是这个我是交给Copilot自动生成了，在这里狠狠安利一波Copilot！！

其实理解了代码的含义也不难，最重要的就是掌握好libpng库的使用框架和API，当然还有图像的存储方式：图像的image_width和image_height指的是图像的宽和高分别有多少个像素点，而图像的存储是按行优先排列的，所以用png_get_rows()函数获取的是指向图像数据一行一行地址的指针，其实可以当作是一个二维矩阵来看，所以通过两层循环也就可以遍历图像数据了。