Tu imagen.Tu creación.
Edición visual con herramientas reunidas en un solo lugar.
Editor de imagen de escritorio: selección, ajustes de color, texto, formas, capas y exportación a partir de una foto.Editor de imagen: ajustes, texto, formas y capas.
- Tauri
- React
- Fabric.js
- Rust
Tu imagen.Tu creación.
Edición visual con herramientas reunidas en un solo lugar.
- Tauri
- React
- Fabric.js
- Rust
Editor de imagen de escritorio: selección, ajustes de color, texto, formas, capas y exportación a partir de una foto.Editor de imagen: ajustes, texto, formas y capas.
- Tauri
- React
- Fabric.js
- Rust
Reglas, guías y encaje
Se acercó, encajó.
Alinear elementos a mano cansa y nunca queda exacto. El editor ayuda: cuando el borde o el centro de un objeto se acerca a una guía o a otro objeto, salta a su lugar y muestra la línea. Arrastra los bloques, saca guías nuevas de las reglas y mira cómo encaja.
La mesa de trabajo
Arrastra los bloques. Saca una guía de la regla de arriba o de la lateral; suéltala sobre la regla para borrarla. Con el bloque elegido, las flechas mueven 1 px (Shift, 10). Mantén Alt para soltar sin encajar.
Lo que encajó
- Bloque 1
- x 70 · y 70
- Distancia de encaje (en pantalla)
- 8 px
- Guías (1)
- x 300
Las reglas son las del editor (guias.ts): el objeto que se mueve ofrece 3 puntos por eje, izquierda, centro y derecha; arriba, medio y abajo. Los objetivos son las guías y los bordes y el centro de los otros objetos. Vale la menor distancia, hasta 8 px de pantalla (por eso el encaje es igual con la mesa grande o pequeña); en el empate, gana la guía, porque fue puesta a propósito. La regla tiene 22 px y pone un número cada ~70 px de pantalla, redondeado a 1, 2 o 5 veces una potencia de 10. No hay cuadrícula.
Ajusta. Recorta. Transforma.
Color, selección y elementos para trabajar cada detalle.
Una vista previa que muestra un color y un archivo guardado con otro es el peor defecto de un editor. Aquí, la vista previa y el resultado final usan la misma cuenta, escrita dos veces, en la vista del navegador de la app y en el motor en Rust. Mueve los ajustes: a la izquierda, esa cuenta; a la derecha, el filtro nativo del navegador.
Lado a lado
Filtros y ajustes
brilho 1 · contraste 1 · inverter 0 saturação 1 · matiz 0° · sépia 0
La cuenta es la del editor (ajustes.ts, y la misma en ajustes.rs): una tabla de 256 entradas para brillo, contraste y negativo, y luego una matriz 3 × 3 para saturación, tono y sepia, con los pesos 0,213 / 0,715 / 0,072 de la especificación de filtros del navegador. Los filtros listos son combinaciones exactas: Sepia = sepia 1 y saturación 0,85; Frío = tono −14° y saturación 1,1; Cálido = tono +14°, saturación 1,12 y brillo 1,03. La vista previa corre en el tamaño de pantalla y el "Aplicar" corre en Rust, en el tamaño real. La foto es de BabyShoes.
De la idea al archivo final.
Capas, historial y exportación en un flujo visual.
Un buen recorte tiene borde suave, con cientos de niveles de transparencia, y un formato equivocado lo tira todo sin avisar. El editor cuenta los niveles antes y después de exportar y avisa cuando el formato va a estropear el recorte. Cambia la suavidad del borde y el formato.
El recorte
El formato
Poca transparencia (128 niveles o menos): la app ni avisa.
Simulado con los 83 niveles que la propia app midió para el PNG indexado.
| PNG | 177,7 KB | 255 niveles |
| WebP | 30,2 KB | 255 niveles |
| WebP sin pérdida | 70,3 KB | 255 niveles |
| PNG indexado | 32,4 KB | 83 niveles |
| JPEG | 27,1 KB | 1 nivel |
Las pantallas reales
Las reglas son las del editor (imagem.rs y PainelExportar.tsx): cuenta los niveles distintos de transparencia y cuánto de la imagen tiene transparencia entre 9 y 246 (el borde suave). Con más de 128 niveles, avisa: PNG y WebP la mantienen, PNG indexado la reduce, JPEG y PDF aplanan sobre el color de fondo. La tabla es la medición de la propia app, en un recorte de 255 niveles. Aquí, PNG, WebP y JPEG pasan por el codificador de tu navegador, así que los tamaños varían un poco de los de la app. El PDF de la app es una imagen en una página A4.
Las tecnologías
De qué está hecho, pieza por pieza
Un editor de imagen de escritorio en dos mitades: la pantalla, en React con Fabric.js dibujando texto, formas y selección encima de la foto, y un motor en Rust que guarda los píxeles y hace los ajustes en tamaño real, el historial y la exportación. Elige una pieza para ver qué hace aquí y en qué archivo está.
8tecnologías, en 2 capas
La pantalla
El motor
Herramientas de creación y desarrolloProject Launcher