Imagen a array C
Convierte una imagen en un array de bytes en C listo para una pantalla embebida. Elige el tamaño de la pantalla, escoge monocromo con umbral y tramado, escala de grises, RGB565 o RGB888, y mira exactamente lo que mostrará la pantalla antes de copiar el código.
Última actualización:
Cómo usar Imagen a array C
- Suelta una imagen, elige una o pégala con Ctrl+V. Se carga una de ejemplo para que pruebes los ajustes primero.
- Elige el tamaño de la pantalla en los ajustes predefinidos o escribe un ancho y un alto personalizados, y luego elige cómo se escala la imagen.
- Elige el formato de color que espera tu driver: monocromo para la mayoría de las OLED, RGB565 para las TFT a color.
- Ajusta el resultado con el umbral, el tramado, la inversión y la disposición de bytes mientras miras la vista previa.
- Copia el array o descarga el archivo .h y dibújalo con tu librería de pantalla.
Formatos de color y uso de memoria
| Formato | Bits por píxel | 128 × 64 | 240 × 240 | Pantallas típicas |
|---|---|---|---|---|
| Monocromo 1 bit | 1 | 1,024 B | 7,200 B | SSD1306, SH1106, PCD8544 (Nokia 5110), e-paper |
| Escala de grises 4 bits | 4 | 4,096 B | 28,800 B | OLED en escala de grises SSD1322, SSD1327 |
| Escala de grises 8 bits / RGB332 | 8 | 8,192 B | 57,600 B | Sprites con paletas de 8 bits, LVGL L8 |
| RGB565 | 16 | 16,384 B | 115,200 B | ILI9341, ST7735, ST7789, GC9A01, SSD1351 |
| RGB888 | 24 | 24,576 B | 172,800 B | Framebuffers de escritorio, matrices LED, procesamiento de imágenes |
Un Arduino Uno tiene 32 KB de flash, así que una imagen monocromo de pantalla completa de 128 × 64 cabe sin problema, pero una imagen RGB565 de 240 × 240 (112.5 KB) necesita una placa como ESP32 o RP2040.
Cómo dibujar el array
// Adafruit SSD1306 / GFX: horizontal, MSB first display.drawBitmap(0, 0, image, IMAGE_WIDTH, IMAGE_HEIGHT, SSD1306_WHITE); display.display(); // u8g2: horizontal, LSB first (XBM) u8g2.drawXBMP(0, 0, IMAGE_WIDTH, IMAGE_HEIGHT, image); // TFT_eSPI: RGB565 as uint16_t words tft.pushImage(0, 0, IMAGE_WIDTH, IMAGE_HEIGHT, image);
Consejos para resultados nítidos
- Diseña al tamaño final. Reducir una foto grande a 128 × 64 pierde detalle; el texto y los iconos dibujados a la resolución exacta de la pantalla se mantienen nítidos.
- Revisa la vista previa con zoom: muestra exactamente los píxeles que se encenderán, incluidos los patrones de tramado y el relleno añadido cuando el ancho no es múltiplo de 8.
- Los PNG transparentes se colocan primero sobre negro o blanco; elige el que coincida con el fondo de tu pantalla.
- ¿Los colores se ven mal en una TFT? Si el rojo y el azul están intercambiados, el panel está en modo BGR; si los colores se ven con ruido, prueba la opción RGB565 con bytes intercambiados (big-endian) o setSwapBytes() de tu librería.
Preguntas frecuentes
¿Qué disposición de bytes necesita mi librería OLED?
drawBitmap() de Adafruit GFX espera filas horizontales con el bit más significativo primero, y cada fila rellenada hasta un byte completo. drawXBM() de u8g2 espera filas horizontales con el bit menos significativo primero (formato XBM). Escribir directamente en el framebuffer de un SSD1306 o SH1106 requiere páginas verticales: cada byte es una columna de 8 píxeles con el bit 0 arriba.
¿Qué es RGB565?
RGB565 empaqueta un color en 16 bits: 5 bits de rojo, 6 de verde y 5 de azul, calculado como ((R & 0xF8) << 8) | ((G & 0xFC) << 3) | (B >> 3). Es el formato nativo de la mayoría de los controladores TFT SPI, como ILI9341, ST7735 y ST7789. Librerías como TFT_eSPI y drawRGBBitmap() de Adafruit GFX usan arrays uint16_t; algunas rutinas DMA necesitan intercambiar los dos bytes (big-endian).
¿Qué tamaño tendrá el array?
Una imagen monocromo necesita ancho × alto ÷ 8 bytes, así que una pantalla OLED de 128 × 64 ocupa 1,024 bytes. La escala de grises de 4 bits necesita medio byte por píxel, RGB332 y la escala de grises de 8 bits un byte, RGB565 dos bytes y RGB888 tres bytes por píxel, así que una imagen RGB565 de 240 × 240 ocupa 115,200 bytes.
¿Cuándo debo usar tramado?
Usa tramado para fotos, degradados y logotipos sombreados en pantallas de 1 bit: simula niveles de gris con patrones de puntos. Floyd–Steinberg da el resultado más suave, Atkinson conserva más contraste y el tramado ordenado (Bayer) da un patrón regular que se ve bien en pantallas pequeñas. Para texto, iconos y dibujos lineales, el umbral simple es más nítido.
¿Qué hace el umbral?
El brillo de cada píxel se calcula como 0.299 R + 0.587 G + 0.114 B (de 0 a 255). Los píxeles iguales o superiores al umbral pasan a 1 (encendidos) y los más oscuros a 0. Baja el umbral para encender más píxeles, súbelo para encender menos, o marca Invertir para intercambiarlos.
¿Necesito PROGMEM?
En placas AVR como Arduino Uno o Nano, sí: sin PROGMEM un array constante se copia a los 2 KB de RAM al arrancar. Librerías como Adafruit GFX leen los bitmaps PROGMEM con pgm_read_byte(). En placas ESP32, ESP8266, RP2040 y ARM los datos const se quedan en la flash de todos modos, y PROGMEM se define vacío por compatibilidad.
¿Se sube mi imagen?
No. La imagen se decodifica, se escala y se convierte con la API de canvas en tu navegador, y el código se genera en tu dispositivo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.
Herramientas relacionadas
Ver todas las de Conversores de datos y formatos de archivo →