Bildcollage-Layout mit Zellpositionen erstellen

Er ermittelt die erforderliche Breite jeder Spalte und die Höhe jeder Zeile und gibt anschließend die Größe der Collage-Fläche sowie das genaue Rechteck jeder Zelle zurück. Mit dem Ergebnis platzieren Sie Bilder präzise in HTML, canvas, SVG, Designwerkzeugen oder Verarbeitungspipelines, ohne Versätze manuell zu addieren oder überlappende Zellen zu riskieren.

Bereiten Sie die Maße zeilenweise vor

Geben Sie für jedes Bild ein Paar aus Breite und Höhe an: zunächst von links nach rechts in der ersten Zeile, danach ebenso in allen folgenden Zeilen. Die Felder rows und cols bestimmen die Rasterform; ihr Produkt muss daher genau der Anzahl der Bilddatensätze entsprechen. Diese strenge Prüfung verhindert einen typischen Collage-Fehler: Eine Zelle bleibt unbesetzt oder ein zusätzliches Bild wird verworfen, weil die geplante Form nicht zur Quellliste passt. Breiten und Höhen müssen positive, endliche Zahlen sein. Ganze Zahlen und Dezimalwerte sind zulässig, sodass Sie Pixel, Punkt, Millimeter oder eine andere einheitliche Maßeinheit verwenden können. Mischen Sie innerhalb einer Anfrage keine Einheiten, da der Algorithmus alle Zahlen als Bestandteile desselben Koordinatensystems behandelt. Die Antwort enthält neben jeder berechneten Zelle weiterhin die ursprüngliche Breite und Höhe. So können Sie den Eintrag eindeutig dem Quellbild zuordnen und später entscheiden, wie das Bild eingepasst, zugeschnitten oder ausgerichtet werden soll.

Verstehen Sie die Berechnung der Zellgrößen

Jede Spalte erhält die größte Quellbreite, die in dieser Spalte vorkommt, und jede Zeile die größte Höhe ihrer Bilder. Eine Zelle am jeweiligen Schnittpunkt verwendet somit die Spaltenbreite und die Zeilenhöhe. Dadurch bleiben die Rastergrenzen ausgerichtet, während jedes Quellbild in Originalgröße in seine Zelle passt. Der Rechner bildet die x-Versätze durch Addition aller vorherigen Spaltenbreiten und die y-Versätze durch Addition aller vorherigen Zeilenhöhen. Die erste Zelle beginnt bei null, null. Die gesamte Collage-Breite ist die Summe der Spaltenbreiten; die gesamte Höhe ist die Summe der Zeilenhöhen. Dieses Verfahren erzeugt ein kompaktes rechteckiges Raster, ohne eine Zielgröße oder Skalierungsregel zu erfinden. Es berechnet ausschließlich die Geometrie und streckt, beschneidet, dreht oder zentriert keine Bilder. Diese Darstellungsentscheidungen treffen Sie anschließend anhand des zurückgegebenen Zellrechtecks und der bewahrten Originalmaße.

Nutzen Sie das Ergebnis in Ihrer Rendering-Pipeline

Lesen Sie das Array cells in derselben Reihenfolge wie die Eingabebilder. Jeder Eintrag enthält seinen nullbasierten Index, Zeile und Spalte, den x- und y-Ursprung, Breite und Höhe der Zelle sowie die ursprünglichen Bildmaße. Ein canvas-Renderer kann in jedes zurückgegebene Rechteck zeichnen; ein CSS-Generator kann column_widths und row_heights in explizite Rasterspuren umwandeln; ein SVG-Generator kann vor dem Einfügen der Bilder passende Beschneidungsrechtecke erzeugen. Da die Ausgabe deterministisch ist und keine umgebungsabhängigen Werte enthält, liefert dieselbe Anfrage im Browser, in einem Build-Prozess und über die API identische Geometrie. Zum Zentrieren ohne Skalierung ziehen Sie die Originalmaße von den Zellmaßen ab und halbieren beide Differenzen. Für cover- oder contain-Verhalten berechnen Sie den Maßstab aus den Seitenverhältnissen. Die Trennung dieser Regeln hält die Layoutberechnung nachvollziehbar, prüfbar und vielseitig einsetzbar.