lvgl在spiffs中读取png数据在lv_canvas_draw_img 显示

要在LVGL中使用SPIFFS中的PNG图像数据，需要进行以下步骤：

1. 将PNG图像存储在SPIFFS文件系统中，并使用SPIFFS API读取PNG文件的二进制数据。

2. 将读取到的PNG数据解码为RGB数据，可以使用开源库例如libpng，或者使用专门为嵌入式系统设计的轻量级库例如LodePNG。

3. 将RGB数据填充到一个LVGL图像缓冲区中，并使用lv_canvas_draw_img()函数将该图像绘制到屏幕上。

下面是一个示例代码，其中使用ESP32的SPIFFS文件系统和LodePNG库：

#include <SPIFFS.h>
#include <LodePNG.h>

#define MAX_PNG_SIZE 1024*1024 // 最大PNG文件大小

void read_png_from_spiffs(const char* path) {
  // 从SPIFFS读取文件
  File file = SPIFFS.open(path);
  if (!file) {
    Serial.println("Failed to open PNG file");
    return;
  }

  // 分配缓冲区来存储PNG文件
  uint8_t* png_data = (uint8_t*)malloc(MAX_PNG_SIZE);
  if (!png_data) {
    Serial.println("Failed to allocate memory for PNG data");
    return;
  }

  // 读取PNG数据到缓冲区
  size_t png_size = file.read(png_data, MAX_PNG_SIZE);
  if (png_size == 0) {
    Serial.println("Failed to read PNG data from file");
    free(png_data);
    return;
  }

  // 解码PNG数据为RGB数据
  unsigned int width, height;
  std::vector<unsigned char> rgb_data;
  unsigned error = lodepng::decode(rgb_data, width, height, png_data, png_size);
  if (error) {
    Serial.println("Failed to decode PNG data");
    free(png_data);
    return;
  }

  // 分配LVGL图像缓冲区
  lv_color_t* canvas_buffer = (lv_color_t*)malloc(sizeof(lv_color_t) * width * height);
  if (!canvas_buffer) {
    Serial.println("Failed to allocate memory for LVGL canvas buffer");
    free(png_data);
    return;
  }

  // 将RGB数据复制到LVGL图像缓冲区
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
      int i = (y * width + x) * 4;
      canvas_buffer[y * width + x] = lv_color_make(rgb_data[i], rgb_data[i+1], rgb_data[i+2]);
    }
  }

  // 创建LVGL画布并将图像绘制到画布上
  lv_obj_t* canvas = lv_canvas_create(lv_scr_act(), NULL);
  lv_canvas_set_buffer(canvas, canvas_buffer, width, height, LV_IMG_CF_TRUE_COLOR);
  lv_canvas_draw_img(canvas, 0, 0, width, height, canvas_buffer);

  // 释放内存
  free(png_data);
  free(canvas_buffer);
}

上述示例代码中读取了一个PNG文件，解码为RGB数据，并将图像绘制到LVGL画布上。你可以根据需要调整代码以适应你的具体应用场景。