Combinador de imágenes claro/oscuro — un PNG para fondos blancos y negros
Combina una imagen en modo claro y una imagen en modo oscuro en un único PNG transparente que muestra la ilustración clara sobre blanco y la oscura sobre negro. Sube ambas, previsualiza el resultado en paralelo y descarga un solo recurso adaptable al tema para documentos, README o interfaces, todo en tu navegador.
Qué hace el combinador de imágenes claro/oscuro
Un PNG, dos aspectos
La salida es una composición alfa píxel a píxel: sobre una superficie blanca se ve como tu imagen clara, y sobre una negra como tu imagen oscura. Así un README, una página de documentación o una interfaz usan un único recurso en lugar de dos archivos o una media query.
Dos zonas de carga con vista previa en vivo
Elige una imagen de modo claro y una de modo oscuro; el PNG combinado aparece en cuanto ambas están cargadas, una vez sobre una tarjeta blanca y otra sobre una negra, para que juzgues ambos temas antes de descargar.
Exportación PNG fija
La descarga siempre genera un PNG llamado light-dark-image.png, creado con canvas.toDataURL. No hay salida JPEG, WebP ni SVG, ni ajustes de calidad o compresión.
Lienzo del tamaño de la imagen mayor
El resultado usa el mayor ancho y la mayor altura del par, y ambas imágenes de origen se estiran para llenar ese lienzo desde la esquina superior izquierda. Las proporciones distintas se distorsionan en lugar de rellenarse con márgenes o recortarse.
Local y sin controles de ajuste
Los archivos se leen con FileReader y se combinan en un lienzo: nada se sube. No hay controles de brillo, contraste, tamaño, posición, fondo ni formato; las únicas entradas son las dos imágenes.
Preguntas frecuentes sobre imágenes claro/oscuro
¿Para qué sirve realmente esta herramienta?
Convierte una ilustración en modo claro y otra en modo oscuro en un único PNG transparente cuyo aspecto depende del fondo: las superficies blancas muestran la versión clara y las negras la versión oscura. Está pensada para recursos adaptables al tema en README, documentación e interfaces, no para generarte dos imágenes separadas.
¿Qué ajustes puedo modificar?
Solo las dos imágenes de origen. No hay controles de brillo, contraste, color, posición, escala, color de fondo, formato ni calidad, ni ajuste fino de la combinación; los paneles de vista previa son solo de visualización.
¿Qué formatos de entrada y salida se admiten?
La entrada acepta image/* y usa el decodificador del navegador, así que funcionan JPEG, PNG, WebP y GIF; la salida siempre es PNG. No se ofrece exportación JPEG, WebP ni SVG.
¿Puedo procesar varios pares a la vez?
No. Cada zona toma solo el primer archivo seleccionado y la página procesa un par claro/oscuro cada vez, sin cola, modo por lotes ni historial.
¿Hay límites de tamaño y qué ocurre si las dimensiones no coinciden?
No hay un límite de píxeles explícito más allá de lo que permita la memoria del lienzo del navegador. La salida es max(ancho) × max(alto), y ambas imágenes se estiran a ese tamaño desde la esquina superior izquierda, así que las proporciones distintas se distorsionan en lugar de rellenarse o recortarse.
¿Todo es local?
Sí. Las imágenes se decodifican con FileReader y se combinan en un lienzo dentro de tu navegador; no se sube nada y no interviene ningún servidor. El resultado permanece en memoria como URL de datos hasta que lo descargues.
¿Qué tan fiel es el resultado?
Es una aproximación. Los canales claros se reasignan a 128–255 y los oscuros a 0–127, y luego se resuelven alfa y color para que el par se componga correctamente sobre blanco puro y negro puro; los colores se cuantizan, un contraste extremo puede perder detalle y la fórmula solo es exacta sobre fondos blancos o negros puros (las superficies grises o teñidas se mezclan de otra forma). La transparencia se toma solo del alfa de la imagen clara, y cuando las dos imágenes incumplen la hipótese de luminosidad, el alfa del píxel se fija en cero.
