开始前适用开发板：ESP32-S3 Korvo · 开发框架：ESP-IDF
适用开发板：Korvo S3 · 工程
03.development.photo_album· targetesp32s3
前置：SD 卡读写 · SPI LCD Touch
学习时长：约 25 分钟 · 难度：★★★☆☆
学习目标
完成本节后，你将能够：
- 理解 JPEG 解码 → RGB565 → LVGL 显示的完整图片渲染流程
- 掌握 TF 卡文件遍历和图片文件筛选方法
- 了解 LVGL Image 组件和触摸滑动切换的实现
1. 这个例子在干嘛
一个 电子相册——从 TF 卡读取 JPEG 图片，软件解码为 RGB565，在 LVGL 上全屏显示。触摸滑动或按键切换上下一张。
生活类比：手机相册——左右滑动切换照片。
TF 卡 (JPEG 文件)
├── photo1.jpg
├── photo2.jpg
└── photo3.jpg
↓ fread()
JPEG 软解码 → RGB565 buffer
↓
LVGL lv_img 全屏显示
↕ 触摸滑动/按键
切换上/下一张
2. 编译烧录
cd Korvo_Firmware\03.development.photo_album
idf.py set-target esp32s3
idf.py build flash monitor
TF 卡放入 JPEG 图片（建议尺寸接近屏幕分辨率 240×280）。
3. 使用步骤
- TF 卡根目录放若干
.jpg文件 - 烧录后自动显示第一张图
- 触摸滑动切换图片
- 串口显示当前文件名
4. 运行现象
| 阶段 | 屏幕 | 串口 |
|---|---|---|
| 挂载 SD | — | SD mounted |
| 扫描图片 | — | Found 5 JPEG files |
| 显示 | 全屏图片 | Showing: photo1.jpg |
| 切换 | 下一张 | Showing: photo2.jpg |
5. JPEG 解码流程
fread(file, jpg_buf, file_size) // 整个 JPEG 读入内存
↓
tjpgd 或 software JPEG decoder // 解压缩
↓
RGB565 buffer（宽×高×2 字节） // 解码后的像素数据
↓
lv_img_set_src(img, &rgb_dsc) // LVGL 显示
图片大小与内存
| 图片分辨率 | JPEG 大小 | RGB565 解码后 | PSRAM 占用 |
|---|---|---|---|
| 240×280 | ~20 KB | 131 KB | 可接受 |
| 320×240 | ~25 KB | 150 KB | OK |
| 640×480 | ~50 KB | 600 KB | 较大 |
| 800×600 | ~80 KB | 937 KB | 接近极限 |
6. 常见问题与排查
| 现象 | 可能原因 | 解决方案 |
|---|---|---|
| 无图片 | TF 卡没有 JPEG | 放入 .jpg 文件 |
| 显示变形 | 图片比例与屏幕不同 | 缩放或裁剪到 240×280 |
| 解码失败 | 图片格式问题 | 用标准 JPEG（非渐进式） |
| 切换慢 | 大图解码耗时 | 缩小图片尺寸 |
| 内存不足 | 图片太大 | PSRAM 不够，降分辨率 |
7. 动手改造建议
- 自动轮播：定时器每 3 秒自动切换下一张
- 缩略图模式：小图网格 → 点击放大
- Wi-Fi 传图：HTTP 上传图片到 TF 卡
- JPEG 拍照：摄像头拍照 → 存 TF 卡 → 相册浏览
8. 下一步
| 方向 | 推荐例程 | 说明 |
|---|---|---|
| SD 卡基础 | SD 卡读写 | 文件操作入门 |
| AVI 播放 | AVI Player | 视频版 |
| P4C5 版 | P4C5 相册 | MIPI 大屏版 |
酷世DIY · Kevincoooool