Así funciona un creador de collages en el navegador

Un modelo de rectángulos mantiene alineados CSS y canvas

CSS Grid podría organizar el editor, pero reproducir su colocación automática por separado en el canvas permitiría pequeñas diferencias. Por eso cada plantilla define filas y columnas que una función convierte en rectángulos x, y, ancho y alto para cualquier tamaño. CSS coloca las celdas de la vista con esas medidas y canvas reutiliza la geometría al exportar. El redondeo y el navegador aún pueden afectar píxeles de borde, pero el modelo compartido elimina una fuente importante de desajustes.

CSS favorece la edición; canvas genera la descarga

Renderizar un canvas grande cada vez que cambia el espacio o el zoom sería costoso, sobre todo con nueve fotos. El editor usa elementos posicionados, filtros CSS y recorte con border-radius, que el navegador actualiza con rapidez. Al descargar comienza otro renderizado mediante Canvas 2D y ctx.filter. Aunque ambos aceptan parámetros equivalentes, conviene probar visualmente los navegadores compatibles en vez de prometer una igualdad exacta de píxeles.

Cada fotografía conserva sus propios ajustes

Un único filtro para todo el collage obligaría a tratar igual una foto exterior luminosa y otra interior oscura. Aquí cada imagen guarda su preajuste y sus valores de brillo, contraste y saturación. Seleccionar una celda cambia qué ajustes edita el panel, sin tocar las demás fotografías ni la cuadrícula.

Distinguir preajustes exige algo más que cambiar números

Un preajuste CSS reúne unos pocos valores de brillo, contraste, saturación, sepia, grises, tono y a veces desenfoque. Muchas combinaciones numéricas todavía pueden verse casi iguales. El trabajo útil consistió en separar los resultados lo suficiente sin romper la relación entre estilos de una misma familia. Las rotaciones grandes de tono fueron especialmente engañosas: dan la vuelta a la rueda cromática y podían llevar cielos azules hacia magenta. Los cambios moderados funcionan mejor para tonos naturales; los extremos quedan para efectos intencionalmente estilizados.

El grano necesita su propia capa de textura

Brillo, contraste y saturación modifican el tono, pero no crean la textura fina asociada al grano. Los estilos que la necesitan reciben una capa de ruido aleatorio por píxel y baja opacidad durante el renderizado. Generarla en ese momento evita cargar otro recurso y reduce patrones evidentes, aunque el ruido puede variar entre exportaciones.

El arrastrar y soltar nativo se encarga del orden

Los intercambios usan los eventos dragstart, dragover y drop del navegador, la misma familia empleada en las herramientas de páginas de Orisod. Esto reduce el código personalizado, aunque el comportamiento nativo y su accesibilidad pueden variar entre ratón, tacto y teclado.

Algunos detalles de implementación

Los filtros nativos de CSS y Canvas incluyen brillo, contraste, saturación, sepia, escala de grises, rotación de tono y desenfoque. Los efectos ajenos a ese conjunto necesitan otro paso; el grano, por ejemplo, se compone como textura y no dentro de la cadena de filtros.

El zoom y el desplazamiento pertenecen a cada foto porque cada celda necesita un encuadre propio. La escala y el centro guardados acompañan a esa imagen incluso al cambiar de cuadrícula, sin mover el encuadre de las demás.

Una exportación mayor usa las mismas medidas y parámetros de filtro sobre un tamaño de destino más grande, pero canvas la renderiza en vez de la ruta DOM y CSS de la vista previa. Sería excesivo llamarlas idénticas píxel por píxel; el objetivo es mantener la composición a la resolución elegida.

El fondo actual es un relleno sólido de CSS y canvas. Los degradados o imágenes necesitarían reglas adicionales de tamaño, posición, recorte y exportación debajo de todas las celdas, por lo que siguen siendo otra función y no una capacidad implícita.

La decisión central es compartir el modelo de diseño, no cada operación de renderizado. CSS mantiene ágil la edición, canvas crea la imagen descargable y el estado individual conserva el encuadre y el color de cada foto.