4、图片转换工具入门：LVGL官方图片转换器安装与配置
做嵌入式GUI开发，免不了要和图片打交道。你想想看，一张漂亮的PNG背景图，在单片机上跑不起来——MCU不认识PNG，它只认二进制像素数组。所以，图片转换是LVGL移植里绕不开的一步。
LVGL官方提供了一个命令行工具，叫LVGL Image Converter（简称LvglImageConverter）。说白了，它就是把你的PNG、JPG、BMP，转成LVGL能吃的C语言数组，或者直接生成二进制字体/图片文件。我最早做LVGL项目时，手动用Python脚本转图片，后来发现官方工具已经做得很成熟了，就彻底换了过来。
4.1 工具能做什么？
先搞清楚它的能力边界，免得后面走弯路。LvglImageConverter支持以下几种输出格式：
| 输出格式 | 说明 | 典型场景 |
|---|---|---|
| C Array | 生成C语言字节数组，直接编译进固件 | 小图标、启动Logo、固定背景图 |
| Binary | 生成二进制文件，存储在外部Flash或SD卡 | 大图、多语言字库、动态加载的图片 |
| Font | 将图片转为LVGL字体格式（配合字体工具） | 图标字体、自定义符号 |
| LVGL Image | 生成.lvgl格式，用于LVGL模拟器或在线工具 | 原型验证、跨平台调试 |
我个人最常用的是C Array和Binary。小图直接编译进代码，大图放外部存储，这样内存压力小很多。
4.2 安装方式
这个工具基于Node.js，所以安装前你得先准备好Node环境。如果你还没装Node.js，去官网下载LTS版本就行，一路Next搞定。
4.2.1 全局安装（推荐）
打开终端，敲下面这行命令：
npm install -g @lvgl/image-converter安装完成后，验证一下：
lvgl-image-converter --version如果能看到版本号，比如v1.3.0，说明装好了。我记得第一次装的时候，终端报了个权限错误，后来加了个sudo（Linux/Mac）就解决了。Windows用户记得用管理员身份运行CMD。
npm config set registry https://registry.npmmirror.com，速度会快很多。
4.2.2 局部安装（项目级）
如果你不想全局装，也可以把工具放在项目里：
npm install --save-dev @lvgl/image-converter然后通过npx调用：
npx lvgl-image-converter --help这种方式的好处是，团队协作时每个人都能用同一个版本，避免“我机器上能跑，你机器上不行”的尴尬。
4.3 核心配置参数
工具装好了，怎么用？核心就一条命令，配上几个参数。我挑几个最常用的给你讲讲。
4.3.1 基本命令结构
lvgl-image-converter -i input.png -o output.c -f C_ARRAY -c CF_INDEXED_4_BIT参数说明：
| 参数 | 缩写 | 说明 | 示例值 |
|---|---|---|---|
--input |
-i |
输入图片路径 | ./images/logo.png |
--output |
-o |
输出文件路径 | ./output/logo.c |
--format |
-f |
输出格式 | C_ARRAY, BINARY, FONT |
--color-format |
-c |
颜色格式 | CF_TRUE_COLOR, CF_INDEXED_4_BIT |
--output-format |
-of |
输出文件格式（配合Binary） | BIN, HEX |
4.3.2 颜色格式怎么选？
这是最容易踩坑的地方。颜色格式决定了图片在MCU上的内存占用和显示效果。
- CF_TRUE_COLOR：32位真彩色，效果最好，但一张320x240的图就要300KB。如果你的MCU有外部RAM，可以考虑。
- CF_INDEXED_4_BIT：4位索引色，16种颜色。适合图标、按钮等颜色少的图。内存只有真彩色的1/8。
- CF_INDEXED_8_BIT：8位索引色，256种颜色。折中方案，适合照片类图片。
- CF_ALPHA_8_BIT：8位透明度通道。适合做遮罩、阴影效果。
4.4 实战：转一张图片试试
光说不练假把式。我们拿一张128x128的PNG图标，转成C数组。
第一步，准备图片。确保图片尺寸是2的倍数（LVGL要求），最好是正方形。
第二步，执行命令：
lvgl-image-converter -i icon_settings.png -o icon_settings.c -f C_ARRAY -c CF_INDEXED_4_BIT第三步，查看输出。你会得到一个icon_settings.c文件，里面包含：
- 一个
LV_IMG_DECLARE宏 - 图片宽高、颜色格式描述
- 像素数据数组
第四步，在LVGL代码里引用：
#include "icon_settings.c"
lv_obj_t *img = lv_img_create(lv_scr_act());
lv_img_set_src(img, &icon_settings);
lv_obj_center(img);编译下载，图标就显示出来了。是不是很简单？
4.5 避坑指南
我踩过的坑，你就不用再踩了。这里列几个常见问题：
- 图片尺寸不对：LVGL要求图片宽高都是2的倍数。如果你转了张奇数尺寸的图，显示会花屏。解决办法：用PS或GIMP先把图片缩放到偶数尺寸。
- 颜色格式不匹配：如果你的屏幕是16位色（RGB565），却用了CF_TRUE_COLOR，LVGL会自动转换，但会多消耗CPU。建议直接匹配屏幕色深。
- 路径带中文：工具对中文路径支持不好。我曾经把图片放在“桌面/项目图片”文件夹下，结果死活转不出来。后来改成纯英文路径，一次通过。
- Node版本太低：工具要求Node.js 14+。如果你还在用Node 12，升级一下吧。
scripts/convert_images.sh脚本，把所有图片的转换命令写进去。这样每次更新图片，跑一遍脚本就行，不用一条条敲命令。
4.6 知识体系一览
下面这张图帮你理清本章的核心逻辑：
从这张图可以看得很清楚：输入图片经过转换器，根据你选的格式和颜色配置，输出不同的文件类型。每个环节都有对应的参数控制，理解了这张图，你就掌握了工具的核心用法。
4.7 小结
这一章我们搞定了LVGL Image Converter的安装和基本配置。你学会了：
- 工具能输出哪些格式
- 怎么安装（全局和局部两种方式）
- 核心参数怎么用
- 颜色格式怎么选
- 实际转一张图片的完整流程
工具装好了，下一件事就是批量处理项目里的所有图片资源。别急，后面我们会讲怎么用脚本自动化搞定这件事。现在，先动手转一张你自己的图片试试吧。