如何使用ESP32（Arduino）将BMP图像转换为RGB565

Question

我目前正在从事一个涉及 ESP32 的项目。 ESP32 从 PHP 页面检索 BMP 图像，将 JPG 转换为 BMP。然后 ESP32 需要将 BMP 图像转换为 RGB565 数据，以便使用 LVGL 进行显示。问题不在于显示器或 LVGL，因为标准图像可以正确显示。然而，当显示转换后的图像时，它是可以识别的，但彩色像素似乎是随机放置的。我在最后附上了图片以供参考。

我尝试了以下代码，这给了我前面提到的问题。

我的php页面的代码是：

<?php
// Function to make a request to the Mouser API and fetch the image
function fetchAndConvertImage() {
    // API key for accessing the Mouser API
    $apiKey = 'MY_API_KEY';
    
    // URL for making a request to the Mouser API
    $url = 'https://api.mouser.com/api/v1/search/keyword?apiKey=' . $apiKey;
    
    // Data to be sent in the request
    $requestData = array(
        'SearchByKeywordRequest' => array(
            'keyword' => 'Thermistor',
            'records' => 0,
            'startingRecord' => 0,
            'searchOptions' => 'string',
            'searchWithYourSignUpLanguage' => 'en'
        )
    );
    
    // Encode the data in JSON format
    $jsonData = json_encode($requestData);
    
    // Set up the options for the POST request
    $options = array(
        'http' => array(
            'method' => 'POST',
            'header' => 'Content-Type: application/json',
            'content' => $jsonData
        )
    );
    
    // Create a context for the request
    $context = stream_context_create($options);
    
    // Make the request to the Mouser API
    $response = file_get_contents($url, false, $context);
    
    // Decode the JSON response
    $responseData = json_decode($response, true);
    
    // Extract the image path from the response
    $imagePath = $responseData['SearchResults']['Parts'][0]['ImagePath'];
    
    // Read the image data from the specified URL
    $imageData = file_get_contents("$imagePath");
    
    // Generate a unique file name
    $fileName = uniqid('image_', true) . '.bmp';
    $filePath = __DIR__ . '/' . $fileName;
    
    // Get image dimensions
    $image = imagecreatefromstring($imageData);
    $width = imagesx($image);
    $height = imagesy($image);
    
    // Calculate row size including padding
    $rowSize = floor(($width * 3 + 3) / 4) * 4; // Each pixel is 3 bytes (RGB), and we need to ensure each row is a multiple of 4 bytes
    
    // BMP header
    $bmpHeader = pack('c', 0x42) . pack('c', 0x4D); // Signature BM
    $bmpHeader .= pack('V', 14 + 40 + ($rowSize * $height)); // File size
    $bmpHeader .= pack('v', 0) . pack('v', 0); // Reserved
    $bmpHeader .= pack('V', 14 + 40); // Data offset
    $bmpHeader .= pack('V', 40); // Header size
    $bmpHeader .= pack('V', $width); // Image width
    $bmpHeader .= pack('V', $height); // Image height
    $bmpHeader .= pack('v', 1); // Number of planes
    $bmpHeader .= pack('v', 24); // Bits per pixel
    $bmpHeader .= pack('V', 0); // Compression (0 = no compression)
    $bmpHeader .= pack('V', 0); // Image size (can be 0 when no compression)
    $bmpHeader .= pack('V', 0); // Horizontal resolution (pixels per meter)
    $bmpHeader .= pack('V', 0); // Vertical resolution (pixels per meter)
    $bmpHeader .= pack('V', 0); // Number of colors in the palette
    $bmpHeader .= pack('V', 0); // Number of important colors
    
    // Convert image data to BMP format
    $bmpData = '';
    for ($y = $height - 1; $y >= 0; --$y) {
        for ($x = 0; $x < $width; ++$x) {
            $rgb = imagecolorat($image, $x, $y);
            $color = imagecolorsforindex($image, $rgb);
            $bmpData .= pack('C', $color['blue']); // Blue
            $bmpData .= pack('C', $color['green']); // Green
            $bmpData .= pack('C', $color['red']); // Red
        }
        // Add padding to ensure row size is a multiple of 4 bytes
        $paddingBytes = $rowSize - ($width * 3);
        $bmpData .= str_repeat(pack('C', 0), $paddingBytes);
    }
    
    // Save BMP file
    file_put_contents($filePath, $bmpHeader . $bmpData);
    
    // Free memory
    imagedestroy($image);
    
    // Return file name
    return $fileName;
}

// Call the function to fetch and convert the image
$imagePath = fetchAndConvertImage();
echo "https://theyoungmaker.ddns.net/opencomponent/$imagePath";
?>

和

用于在 ESP32 上获取 bmp 并将其转换为 rgb565 的函数：

bool getImageFromURL(String url) {
  http.begin(url);
  int httpCode = http.GET();

  if (httpCode == HTTP_CODE_OK) {
    WiFiClient* stream = http.getStreamPtr();
    size_t totalLen = http.getSize();
    size_t len = totalLen;

    // Allocate buffer for the image data
    uint8_t* bmp_data = (uint8_t*)malloc(len);
    if (!bmp_data) {
      Serial.println("Failed to allocate memory for image data");
      http.end();
      return false;
    }

    // Read data into buffer
    size_t index = 0;
    while (http.connected() && (len > 0 || len == -1)) {
      size_t size = stream->available();
      if (size) {
        int c = stream->readBytes((char*)(bmp_data + index), size);
        index += c;
        if (len > 0) {
          len -= c;
        }
      }
      delay(1);
    }

    // Parse BMP header
    if (bmp_data[0] != 'B' || bmp_data[1] != 'M') {
      Serial.println("Not a valid BMP file");
      free(bmp_data);
      http.end();
      return false;
    }

    uint32_t dataOffset = *((uint32_t*)(bmp_data + 10));
    uint32_t width = *((uint32_t*)(bmp_data + 18));
    uint32_t height = *((uint32_t*)(bmp_data + 22));
    uint16_t bitsPerPixel = *((uint16_t*)(bmp_data + 28));
    uint32_t compression = *((uint32_t*)(bmp_data + 30));

    if (bitsPerPixel != 24 || compression != 0) {
      Serial.println("Unsupported BMP format");
      free(bmp_data);
      http.end();
      return false;
    }

    // Allocate buffer for the image data in 16-bit format (RGB565)
    size_t imgSize = width * height * 2;
    gui_img_nouveau_projet_png_data = (uint8_t*)malloc(imgSize);
    if (!gui_img_nouveau_projet_png_data) {
      Serial.println("Failed to allocate memory for image data");
      free(bmp_data);
      http.end();
      return false;
    }

    // Convert pixel data to 16-bit (RGB565) format
    uint8_t* src = bmp_data + dataOffset;
    uint16_t* dst = (uint16_t*)gui_img_nouveau_projet_png_data;
    for (int y = 0; y < height; y++) {
      for (int x = 0; x < width; x++) {
        uint8_t b = *src++;
        uint8_t g = *src++;
        uint8_t r = *src++;
        *dst++ = ((r & 0xF8) << 8) | ((g & 0xFC) << 3) | (b >> 3);
      }
      // Skip padding bytes if any
      src += (4 - (width * 3) % 4) % 4;
    }

    // Set image descriptor data
    gui_img_nouveau_projet_png.header.always_zero = 0;
    gui_img_nouveau_projet_png.header.w = width;
    gui_img_nouveau_projet_png.header.h = height;
    gui_img_nouveau_projet_png.data_size = imgSize;
    gui_img_nouveau_projet_png.header.cf = LV_IMG_CF_TRUE_COLOR;
    gui_img_nouveau_projet_png.data = gui_img_nouveau_projet_png_data;

    free(bmp_data);
    http.end();
    return true;
  } else {
    Serial.printf("HTTP GET failed, error: %s\n", http.errorToString(httpCode).c_str());
    http.end();
    return false;
  }
}

有谁知道为什么会出现这个问题？我不确定问题是否源于服务器端从 JPG 到 BMP 的转换，或者源于 ESP32 上从 BMP 到 RGB565 的转换。任何见解或建议将不胜感激。

原图是：

显示屏上显示的图像：

Answer 1

您使用的是 LV_COLOR_DEPTH 16 吗？