Cree un diseño de collage y calcule las celdas

Determina el ancho necesario para cada columna y la altura de cada fila, y devuelve el tamaño del lienzo y el rectángulo exacto de cada celda. Use el resultado para colocar imágenes con precisión en HTML, canvas, SVG, herramientas de diseño o procesos de tratamiento de imágenes, sin sumar desplazamientos manualmente ni arriesgarse a que las celdas se superpongan.

Prepare las dimensiones en orden de filas

Indique un par de ancho y alto para cada imagen, de izquierda a derecha en la primera fila y después del mismo modo en las filas siguientes. Los campos rows y cols definen la forma de la cuadrícula, por lo que su producto debe coincidir exactamente con el número de imágenes. Esta comprobación estricta evita un fallo habitual: dejar una celda vacía o descartar una imagen adicional porque la forma prevista no coincide con la lista. Las dimensiones deben ser números finitos positivos y pueden ser enteros o decimales. Por ello, puede trabajar con píxeles, puntos, milímetros o cualquier otra unidad coherente. No mezcle unidades en una solicitud, ya que todos los valores pertenecen al mismo sistema de coordenadas. La respuesta conserva las dimensiones originales junto a cada celda calculada para que usted pueda vincularla con su imagen y decidir después cómo ajustarla, recortarla o alinearla.

Comprenda cómo se calculan las celdas

Cada columna adopta el mayor ancho original encontrado en ella y cada fila adopta la mayor altura de sus imágenes. Así, la celda situada en cada intersección utiliza ese ancho de columna y esa altura de fila, mantiene alineados los límites de la cuadrícula y permite alojar cada imagen con sus dimensiones originales. La calculadora obtiene los desplazamientos x sumando los anchos de las columnas anteriores y los desplazamientos y sumando las alturas de las filas anteriores. La primera celda comienza en cero, cero. El ancho total del collage es la suma de todos los anchos de columna, y la altura total es la suma de las alturas de fila. El método crea una cuadrícula rectangular compacta sin inventar un tamaño de lienzo ni una política de escalado. Solo calcula la geometría: no estira, recorta, gira ni centra imágenes. Usted puede aplicar esas decisiones visuales posteriormente con el rectángulo y las dimensiones originales devueltos.

Aplique el resultado en su proceso de renderizado

Consulte el array cells en el mismo orden que las imágenes de entrada. Cada elemento incluye su índice, fila y columna desde cero, el origen x e y, el ancho y alto de la celda y las dimensiones originales de la imagen. Un renderizador canvas puede dibujar dentro de cada rectángulo; un generador CSS puede convertir column_widths y row_heights en pistas explícitas; y un constructor SVG puede crear rectángulos de recorte antes de insertar las imágenes. Como la salida es determinista y no depende del entorno, una misma solicitud produce idéntica geometría en el navegador, durante una compilación o mediante la API. Para centrar sin escalar, reste las dimensiones originales a las de la celda y divida cada diferencia entre dos. Para aplicar un comportamiento de cobertura o contención, calcule la escala mediante las relaciones de aspecto. Separar esas políticas mantiene el cálculo predecible y reutilizable.