ESP32开发学习 LVGL Littlevgl 解码显示JPG图片三种方式JPG_SJPG_C Array

待我称王封你为后i 2022-09-02 15:49 2183阅读 0赞

最终运行效果，三张图，三种方式：jpg,sjpg,c\_array

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70][]

LVGL开发中经常用到图片显示，LVGL官方有提供PNG,GIF,JPG等解码库，配合LVGL的虚拟文件系统可以实现控件直接加载调用解码库解码并显示，非常的方便。

此篇文章就介绍如何移植LVGL官方的JPG解码库，通过三种方式来显示JPG图片。

1、文件系统加载JPG文件解码显示

此方法占用RAM多，占用ROM少，解码速度慢

2、转换为SJPG文件通过解码文件系统加载显示

sjpg 是一种基于“普通”JPG 的自定义格式，专为 lvgl 制作。sjpg 是“split-jpeg”，它是一捆带有 sjpg 标头的小 jpeg 片段。解码更快，体积更小，占用内存也小。要通过LVGL提供的python脚本来转换。

3、转换为数组加载显示

将JPG解码，把其中的有效像素提取为C数组，以.c文件的方式存储在代码中。此方法解码速度最快，占用内存少，占用ROM最多。

本文开发环境：  
Visual Studio Code V1.58.2

LVGL版本 V7.10.0

芯片平台：ESP32

IDF库版本：4.3.0

IDF TOOLS编译工具链版本：2.9

本文软件基于LVGL官方提供的ESP32工程lv\_port\_esp32修改而来

LVGL ESP32官方地址：[https://github.com/lvgl/lv\_port\_esp32][https_github.com_lvgl_lv_port_esp32]

开发板平台：HelloBug ESP32开发板

开发板购买链接：[https://hellobug.taobao.com/][https_hellobug.taobao.com]

注意：在开始之前请确认上述开发环境，并确认你的源码必须已经移植并对接了LVGL的虚拟文件系统。没有实现的朋友参考我的另一篇文章：[ESP32开发学习 LVGL Littlevgl 使用文件系统][ESP32_ LVGL Littlevgl]

# 一、移植LVGL\_JPG/SJPG解码库 #

第一步就是先下载lvgl官方的JPG/SJPG解码库

git地址：[https://github.com/lvgl/lv\_lib\_split\_jpg][https_github.com_lvgl_lv_lib_split_jpg]

将下载好的的解码库解压至你的工程目录components文件夹中，目录结构如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 1][]

下载好的解码库中是没有CMakeLists.txt这个文件的，我们的工程是没办法调用这个库的，我们在lv\_lib\_split\_jpg文件夹中创建一个，内容如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 2][]

接着修改main文件夹中的CMakeLists.txt，idf\_component\_register中添加注册lv\_lib\_split\_jpg解码组件，结果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 3][]

在main.c中添加lv\_sjpg.h解码库头文件![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 4][]

在main.c中lvgl初始化 文件系统初始化之后添加jpg解码库初始化

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 5][]

至此，解码库的移植就完成了，接下来就是调用解码了。

看以下三步前，请确保你的lvgl工程已经对接文件系统

# 二、解码显示JPG文件 #

直接调用SD卡里面的JPG解码显示，非常简单，三行代码就能实现，其中S:/image/test\_jpg.jpg是你的SD卡中的图片路径（注意，图片不要太大，否则会内存分配失败）

//
    	/创建一个IMG对象并加载SD卡中的jpg图片解码显示///
    	//
    	lv_obj_t * objpg =  lv_img_create(main_scr, NULL);				// 创建一个IMG对象 
    	lv_img_set_src(objpg, "S:/image/test_jpg.jpg");					// 加载SD卡中的JPG图片
    	lv_obj_align(objpg, NULL, LV_ALIGN_IN_TOP_LEFT, 0, 0);			// 重新设置对齐

# 三、解码显示SJPG文件 #

SJPG占用内存小，是专门针对LVGL的，LVGL官方做了一个python脚本来转换格式，SJPG文件更小，但不能在电脑上打开查看。接下来讲解脚本使用方法和调用图片方法

## 1、安装python ##

LVGL官方提供的转换工具是一个python脚本，你的电脑上必须要有python环境，开发ESP32编译时也用到python脚本，也必须要安装python，所以这里安装方法不在详细说明，网上很多教程，我的博客ESP32开发环境搭建中也有Python安装的教程，需要注意的一点就是安装时要将Python添加到系统变量的一个选择勾选一下即可。其它全部默认

## 2、安装python PIL模块 ##

图片转换需要用到Python的PIL模块，python默认安装是没有的，如果不安装，转换图片会提示没有PIL模块，具体安装解决办法请看我的另一篇文章：[报错：ModuleNotFoundError: No module named ‘PIL‘解决方法][ModuleNotFoundError_ No module named _PIL]

## 3、转换JPG到SJPG ##

接下来就是转换脚本的使用了，文章第一步时我们从LVGL git上下载了jpg解码库，转换脚本就在里面，在电脑上打开你的工程目录中components\\lv\_lib\_split\_jpg\\scripts这个路径，里面有一个jpg\_to\_sjpg.py的python脚本。先下载张jpg图片，放在此文件夹中。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 6][]

复制此文件夹的目录，打开系统cmd窗口，在命令行进入脚本所在的路径。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 7][]

接下来输入命令来转换图片格式，命令：jpg\_to\_sjpg.py jpg\_100.jpg

其中jpg\_100.jpg是我刚才下载的图片，敲回车开始转换，转换非常快，不到0.1秒

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 8][]

成功后查看这个目录中，生成了两个文件：jpg\_100.sjpg     jpg\_100.c，其中.c的文件是我们第四步要用到的，懂的同学看到.c就知道怎么用了，这里先不讲。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 9][]

##  4、调用SJPG解码显示 ##

将上一步生成的.sjpg文件放到你的sd卡中，插入开发板。

然后编写代码调用它，非常简单，也是三行代码即可。

//
    	/创建一个IMG对象并加载SD卡中的sjpg图片解码显示//
    	//
    	lv_obj_t * obsjpg =  lv_img_create(main_scr, NULL);				// 创建一个IMG对象 
    	lv_img_set_src(obsjpg, "S:/image/test_sjpg.sjpg");				// 加载SD卡中的SJPG图片
    	lv_obj_align(obsjpg, NULL, LV_ALIGN_IN_TOP_LEFT, 200, 0);		// 重新设置对齐

# 四、解码显示C Array数组的JPG文件 #

经过第三步其实我们已经将JPG文件转换成了C语言数组，就是那个 jpg\_100.c文件，接下来就简单了。将 jpg\_100.c文件移动到工程目录下components\\lv\_examples\\lv\_examples\\assets资源目录下，这里不要复制，要剪切，因为生成的.c文件也在工程目录里面，只是要移动一个位置，不然会有两个相同的文件。

接下来在main.c中定义引用：LV\_IMG\_DECLARE(jpg\_100);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 10][]

在lvgl代码中同样的添加三行代码即可调用显示

//
    	/创建一个IMG对象并加载ROM中的jpg图片C Array数组显示/
    	//
    	lv_obj_t * carrayjpg =  lv_img_create(main_scr, NULL);			// 创建一个IMG对象 
    	lv_img_set_src(carrayjpg, &jpg_100);							// ROM中的jpg图片C Array数组显示
    	lv_obj_align(carrayjpg, NULL, LV_ALIGN_IN_TOP_LEFT, 0, 100);	// 重新设置对齐

# 最终运行效果 #

三张图，三种方式：jpg,sjpg,c\_array

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70]: /images/20220829/69dfdb1fd5164ffca1826490033a309b.png
[https_github.com_lvgl_lv_port_esp32]: https://github.com/lvgl/lv_port_esp32
[https_hellobug.taobao.com]: https://hellobug.taobao.com/
[ESP32_ LVGL Littlevgl]: https://blog.csdn.net/cnicfhnui/article/details/118972851
[https_github.com_lvgl_lv_lib_split_jpg]: https://github.com/lvgl/lv_lib_split_jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/af1c0dbfd6194033a37cb3d7ef6bf901.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/f4acd164d84e4ea0be932e30f9c0414f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/d8dd7d7368ec44fb937004aed0366207.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/d81b73464f6b4fb5a5a4043bb43d4dcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 5]: /images/20220829/5a1e3d21536e475b996059924bceca9b.png
[ModuleNotFoundError_ No module named _PIL]: https://blog.csdn.net/cnicfhnui/article/details/119321142
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 6]: /images/20220829/2f4c3451a97e4e69930c1c2ebfc5d794.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 7]: /images/20220829/447ba77425284f9f8512149f3527b526.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 8]: /images/20220829/a6477036c4044bd99b591984ce4fbe18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 9]: /images/20220829/cc97e3fa31a441398e4695fcbce04311.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 10]: /images/20220829/794cc8583d14415bb1c26980c8f10636.png