LVGL常用部件使用总结之图片部件

图片部件可用于显示图片，图片源可以是 C 语言数组格式的文件、二进制的.bin 文件以及图标字体。值得注意的是，图片部件要显示 BMP、JPEG 等格式的图片，则必须经过解码。

图片部件的组成部分仅有一个：主体（LV_PART_MAIN）

图片源选择

图片部件的图片来源分为三种：C 语言数组；存储在外部的图片文件；图标字体（详见8.2 章节）。接下来，我们详细介绍上述三种图片源的使用方法：

C语言数组

上面的网址如下：Online image converter - BMP, JPG or PNG to C array or binary | LVGL

这里有几个问题需要我们注意下：

刚进入这个界面，估计看不到这个转换的界面，只能看到一些文字介绍，我们稍微等一等，就会出现了；

没有加载图片之前，转换界面是上面那样的，导入图片之后，就会多了个文件名称的选项，这里的名称默认就是图片的命名，如下所示：

我们可以修改这个名称，也可以不改，但是这个名称我们后面会用到，所以推荐做好管理。

注意，该网站可一次性转换多个图片文件：

选项选好之后我们点击Convert，转换完成后，我们就会得到一个以刚才那个名字命名的c文件

可以看到，这个文件有4M之大，我导入的图片尺寸是320*240的，图片本身大小为43K，竟然一下子变得那么大，那这个文件里面到底是什么样的内容呢？

在熟悉文件内容之前，有个问题得再次强调下：

运行之前内存中是没有数据的，所有代码信息都存在flash里面，内存中的数据是运行时从flash中加载进去的，用完就会释放，所以内存够不够，并不能看总的数据，而是要看同一时间加载进入内存的数据量是不是会溢出。

继续看文件内容。

打开看看

这个文件里面有两块内容

一个就是图片对应的数组变量

这个数组加了const前缀，所以处于常量区，数组的名称也是刚才上面取的名称后面加了个_map

这一块值得注意的是，在转换器C数组（变量）中，所有颜色深度（1、8、16或32）的位图都包含在C文件中

把文件接着往下拉，就会看到这些颜色深度通过宏定义进行了选择

1位或者8位对应的数据

16位并且不交换字节时对应的数据

16位并且交换了字节时对应的数据

32位对应的数据

虽然这些颜色深度的数据都放进来了，但是只有与lv_conf.h中的LV_COLOR_DEPTH匹配的颜色深度才会实际链接到生成的可执行文件。

第二块就是基于这些数据，LVGL为自己定义的一个变量，提供给我们引用的，这是个结构体变量，里面除了图片数据，还定义了图片的一些属性参数。

如下：

这里可引用的名称和我们之前转换时所取的名称是一样的。

我们只会用到一种颜色深度，所以尝试把其他不要的数据都删掉看看。

前提是别删错了数据。

删掉之后数据变成了900多K

可以大大减小图片文件的占用内存。

我们试着将删减前的完整文件导入程序中，看看能不能显示。

这里我担心一个问题，那就是4M大小的c文件，电脑倒是能放得下，但是工程链接之后，会占用多少单片机的Flash呢？运行之后会占用单片机多少内存呢？会不会不够用？

我们先看下没有加入图片之前的空间占用情况

内存占用82.41kB，Flash占用196.24kB

我用的是F407，内存192k，Flash是512k

接着看加入图片之后的情况

将刚才的文件复制进入工程文件里，然后在keil里导入

然后编译看看

此时，编译还不会产生空间占用，因为还没有使用，所以就不会被链接。

可见，此时这个4M大小的图片，占用的还只是我电脑上的存储空间，所以文件大也没什么关系，影响的只是我们的整个工程的占用空间，跟最终烧录的文件没关系。

我们尝试着使用这个图片文件

注意，图片源变量必须要先声明再引用，其实就算LVGL不引用，我们自己也要声明外部变量，才能被调用，并且，引用的是指针。

其实就三个步骤：

声明图片源；

创建图片对象；

设置图片源。

此时编译后查看空间占用情况

显然flash占用情况提高了将近150kB，但是内存占用没有太大的增长。

这样来看，如果图片太多了，自带的空间肯定就不够用了。

可是我现在想要用图片做背景，然后切换页面，需要用到几十张图片，怎么办呢？

虽然切换页面时，内存可以释放再切换，但是这个素材要怎么处理呢？

这个问题后续得想办法解决下，我们先把刚才使用的图片下载看看能不能显示。

经确认，可以正常显示。

我们再用加一张图片切换下试试看。

加了两张图片后，Flash占用又大了

下载看看，可以实现切换效果，但是过程中发现一个问题，那就是不断切换图片，图片切换越来越慢，猜想应该是不断切换，导致不断创建图片对象，而之前的图片对象还没有删除，所以导致内存空间越来越小。

于是又有个疑惑，这里都是局部变量，出函数就释放了，为啥还要手动删除？

就算我想删除，也识别不到对方的对象呀。

这种情况下，我们可以将页面对象都上升成全局变量

烧录后可以解决这个问题。关于更详细的多页面管理和切换，后续会专门讲解。

至此，就算完成了c数组作为图片源显示图片的操作。

其实这里还有个疑惑，开头说的这句话

这里说要解码，可是我这一顿操作下来，也没有哪里涉及到解码了呀。

咋回事

我们先来了解下什么是图片的编码。

各类型的图片为了实现对应的要求，比如不失真，比如体积小等等，就要对原始的像素数据进行相应的处理，不同的处理就对应了不同的图片格式，因此编码就是将原始像素数据给处理成其他的一套编码数据，方便传输加密等等。

有编码，就有解码，就是将这一套编码数据给解析成原始的像素数据，然后在屏幕上显示出来。

图片解码是将原始的图像数据转换为可用于显示的格式的过程。常见的图片格式包括JPEG、PNG、BMP等。为了能够在嵌入式设备上高效地进行图片解码，通常会使用专门的图像解码库，例如1ibjpeg、1ibpng等。这些库提供了丰富的API和算法，能够有效地解码各种图片格式。

图片解码的步骤通常包括以下几个环节：

更多可参考这篇文库《关于图片的解码和显示》

为了弄懂上面提到的解码库的问题，关键就是搞清楚网站生成的c数组是带图片格式的数据，还是就是像素数据，如果是带格式的数据，那么lvgl就肯定就是使用了内置的解码库，如果是像素数据，那么就说明网站所做的操作其实就是解码的过程，LVGL直接将其刷到显存中即可，不必再次解码。

怎么确定是哪种呢？

我做了张纯红色的图片，导入之后转换，结果如下：

全是F800，这其实就是纯红色的像素数据。

而且，之前的移植中根本就没有把解码库加进工程里。

由此可见，这个网站得到的就是像素数据，也就是说，这个网站已经把图片进行了解码。

我们导入后直接使用就行了。

关于图片编码和解码，上面有个现象可以结合理解，上面我的一张PNG图片只有40多K，但是解码后得到的文件大小有900多K，这就是因为PNG在磁盘里存的是带格式的编码数据，为了显示转化成原始像素数据后，就占用了很大的空间，我这里单片机开发是直接读取的解码后的数据，所以要将这些原始数据直接存放在flash中，但是电脑里放的就是PNG格式的编码数据，要想显示，就得在内存读取时，先经过解码器解析成原始数据，二者的逻辑是不一样的，要注意体会和区分。

外部图片源文件

在上面C语言数组方式中，有个很大的问题，那就是我只使用了两张图片，就已经占用了将近500k的falsh，这显然是不行的，我需要使用的图片有大概50张，如果一张的大小是150k，那么就需要8M的空间才行。

怎么办呢？

解决办法就是将这些图片以网站生成的bin文件形式放在外部Flash，然后使用LVGL自带的文件系统来读取素材。

如何将素材存到外部flash，这是一个比较麻烦的问题。

参考这篇文章：《如何将资源烧写到外部flash（暂时移植失败）》

一般来说，lvgl的背景都是画出来的，直接用图片做背景是串口屏的上位机的常用操作；

如果有一些图案图标不好绘制，就可以用图片，这种情况下都是一些小图片，占用不了多少内存，此时直接用内部c数组的方式导入即可。

确实不够用时，再考虑使用外部flash。

图标字体

API函数 

我们介绍 LVGL 图片部件常用的 API 函数：

解码库

根据各种资料我们知道，LVGL集成了图片的解码库，既然这种C语言数组的方式网站已经帮我们解码了，这个解码库有什么用呢？

我所能想到的应用场景就是，一个外部存储介质，比如SD卡或者U盘，里面放的就是一张PNG或者BMP等原格式的图片，里面存的是带格式的数据，现在我设备要读取这张照片，读到的就是带格式的数据，这种情况下没有网站给你转成像素数据，所以就只能LVGL自己来解码，将这个数据转成像素数据了。

这应该就是解码库的使用场景。

上面说的电脑里的PNG图片只有40多K，这就是存放的格式编码数据，计算机为了显示，就得集成对应的解码器，才能将其解析成像素数据然后显示出来。

而上面说的三种方式，网站已经帮我们解码了，所以这几个场景下，都无需使用解码库。

待解决问题

那么，就还剩下两个问题：

还有就是如何合理地管理和切换各个页面？

再就是图片作为整个背景，上面还能叠加一些小尺寸的图片吗？

后续再专门讲解。