零基础学ESP32：240x240彩色屏幕显示图片，让心仪的照片跃然屏上！

逗脑IDE
0 阅读5分钟

上一节课我们学会了让240x240彩色屏幕显示文字和纯色，但文字终归是文字，如果能把自己喜欢的照片、Logo、表情包显示在屏幕上，那才叫真正的“玩起来了”。

今天这节课，我们就来学习如何让ESP32在240x240彩色屏幕上显示图片。不需要复杂的图像处理知识，跟着步骤一步步来，你最喜欢的图片就能出现在那块小屏幕上。

第一步：找到课程，看看成品效果

打开逗脑IDE，点击顶部 “教程”，在 “硬件” → “ESP32 + MicroPython” 分类下，找到240x240显示屏2-图片。

在这里插入图片描述

打开课件，你会看到本节课的最终效果——一张清晰的图片完整地显示在240x240彩色屏幕上。

第二步：图片显示的原理

在开始操作之前，先花一分钟理解一下原理。

我们的目标： 把一张普通图片（JPG/PNG）显示到ESP32驱动的240x240屏幕上。

核心问题： ESP32的MicroPython环境并不能直接识别JPG或PNG格式。它需要的是原始的RGB565像素数据。

解决方案： 在电脑上先用Python脚本把图片转换成ESP32能识别的二进制格式（.bin文件），然后上传到ESP32，代码读取这个文件并逐行绘制到屏幕上。

整个流程分为三大步：

  1. 准备图片（选图/下载）
  2. 转换格式（电脑上用Python脚本把图片转为.bin文件）
  3. 显示图片（ESP32读取.bin文件并显示在屏幕上）

第三步：方式一——直接使用现成的图片文件

如果你是新手，想先快速看到效果，方式一最适合你——直接使用课件里提供的现成图片文件。

操作步骤：

  1. 在课件中找到 “点击下载图片” 按钮，下载 output_image.bin 文件
  2. 将 output_image.bin 上传到ESP32开发板

在这里插入图片描述

就这么简单！文件传好后，直接跳到第五步运行代码就能看到效果。

第四步：方式二——制作自己的专属图片（选做）

如果你想显示自己最喜欢的照片或图片，方式二就是为你准备的。跟着下面几步走：

第一步：准备一张图片

你可以从网上下载一张图片，或者用自己的照片。建议选择正方形的图片，或者稍后裁剪成正方形。分辨率最好是240x240，如果不是也没关系，转换脚本会自动调整大小。

第二步：用Python脚本转换图片格式

在电脑上打开逗脑IDE（或者PyCharm、VSCode都可以），创建一个新的Python文件，粘贴以下代码：

from PIL import Image

def convert_to_rgb565(input_file, output_file):
    # 打开图片并转换为RGB模式
    img = Image.open(input_file).convert('RGB')
    # 调整为240x240分辨率（匹配屏幕尺寸）
    img = img.resize((240, 240))
    
    with open(output_file, 'wb') as f:
        for y in range(img.height):
            for x in range(img.width):
                r, g, b = img.getpixel((x, y))
                # 将RGB888转换为RGB565格式（16位色）
                rgb565 = ((r & 0xF8) << 8) | ((g & 0xFC) << 3) | (b >> 3)
                f.write(rgb565.to_bytes(2, 'big'))
    
    print(f"转换完成！已生成 {output_file}")

# 使用示例：将test1.png转换为output_image.bin
convert_to_rgb565('test1.png', 'output_image.bin')

第三步：运行脚本，生成.bin文件

将你的图片放在和脚本相同的目录下，修改代码中 convert_to_rgb565('你的图片.png', 'output_image.bin') 的文件名，然后运行脚本。

运行成功后，文件夹中会出现 output_image.bin 文件。

第四步：上传到ESP32

用逗脑IDE（或Thonny）将生成的 output_image.bin 文件上传到ESP32开发板。

在这里插入图片描述

第五步：一键打开代码，运行显示

图片文件已经上传到ESP32了，接下来就是代码环节。

找到课件中的示例代码块，将代码保存到ESP32上。

from machine import Pin, SPI
import st7789py

# 唤醒屏幕
st7789py.wakeup(SPI(2, 60000000), dc=Pin(2), cs=Pin(5), rst=Pin(15))

# 创建显示对象
tft = st7789py.ST7789(SPI(2, 60000000), 240, 240, 
                       reset=Pin(15), dc=Pin(2), cs=Pin(5), rotation=0)

tft.fill(st7789py.BLACK)  # 先清屏

def show_img():
    with open("output_image.bin", "rb") as f:
        for row in range(240):  # 逐行读取
            buffer = f.read(480)  # 每行240个像素×2字节=480字节
            tft.show_img(0, row, 239, row, buffer)  # 绘制一行

show_img()

保存到ESP32后，点击运行按钮。

注意看屏幕的画面——你选择的图片完整地显示在了240x240彩色屏幕上！

在这里插入图片描述

把喜欢的图片都搬到屏幕上去

图片显示功能打开了无限的可能：

应用场景显示内容
电子相册家人照片、宠物照片轮播
桌面摆件显示喜欢的动漫角色、Logo
智能家居面板设备状态图标、场景图标
个人信息展示头像、个性签名、二维码
创意DIY表情包显示、节日祝福画面

你甚至可以把多张图片都转成.bin文件上传到ESP32，然后让它们轮播显示——一个小型电子相册就诞生了。

全程回顾

步骤方式一（快速体验）方式二（自制图片）
1. 获取图片直接下载课件提供的.bin文件选一张自己的图片
2. 转换格式跳过此步运行Python脚本，生成.bin
3. 上传到ESP32上传.bin文件到ESP32上传.bin文件到ESP32
4. 打开代码点击“打开”按钮点击“打开”按钮
5. 运行点击运行 → 图片出现！点击运行 → 图片出现！

方式一适合： 想快速看到效果的新手 方式二适合： 想显示自己图片的进阶玩家

两种方式都支持，你可以先用方式一建立信心，再尝试方式二制作自己的专属图片。

如果你对本节课感兴趣，去官网（**www.dounao.cn**）下载逗脑IDE，准备好ESP32和240x240彩色屏幕，跟着课件走一遍。

有任何问题或建议，欢迎在评论区留言告诉我们。

avatar
文章
阅读
粉丝