Zuletzt aktualisiert: 16. April
# Collage-Effekte für /image/merge: polaroid-stack und mosaic
**Kevin van Zonneveld**
Mitgründer · Amsterdam, Niederlande · Bio anzeigen
[](https://x.com/kvz)[](https://github.com/kvz)
Unser Robot [🤖 /image/merge](/de/docs/robots/image-merge.md) ist unsere bevorzugte Lösung zum Zusammenfügen von Bildern. Bisher erzeugte er jedoch nur einfache horizontale oder vertikale Sprite-Sheets. Ideal für Kontaktabzüge und Sprite-Maps, aber etwas steif für Inhalte, die mit anderen Menschen geteilt werden sollen.
Heute ergänzen wir denselben Robot um zwei stilisierte Collage-Layouts: `polaroid-stack` und`mosaic`.
Die Idee ist einfach: Für den häufigen Workflow „N Uploads in ein einziges ansprechendes Bild verwandeln“ sollte ein einzelner Step der schnellste Weg sein, ohne eine Leinwand manuell erstellen zu müssen. Keine Choreografie für das Compositing mit einem Robot, keine Geometrieberechnungen und keine manuelle Platzierung der einzelnen Fotos.
## Zwei Effekte, ein Robot
Das Layout wählen Sie mit dem neuen Parameter `effect` aus:
```json
{
"steps": {
"collage": {
"robot": "/image/merge",
"use": { "steps": [":original"], "bundle_steps": true },
"effect": "polaroid-stack",
"width": 1920,
"height": 1200
}
}
}
```
### `polaroid-stack`: Sofortbilder auf einer Leinwand
`polaroid-stack` ordnet die Eingaben als überlappende Sofortbilder auf einer farbigen Leinwand an. Jedes Foto erhält einen dezenten Schlagschatten und eine zufällige Neigung. Bei demselben Wert für `seed` sind die Ergebnisse deterministisch, sodass Sie ein bevorzugtes Layout dauerhaft festlegen können.
Im Hintergrund berechnen wir, wie viele Fotos pro Zeile auf die Leinwand passen, und skalieren das Polaroid-Papier so, dass das darin enthaltene Foto quadratisch bleibt. Anschließend platzieren wir jedes Bild in einem leicht pseudozufälligen Winkel und fügen das Ergebnis standardmäßig auf einem beigefarbenen, papierähnlichen Hintergrund zusammen.
Das 1200×630 große Bild am Anfang dieses Beitrags zeigt den Effekt `polaroid-stack` mit sechs Eingaben, die alle mit einem einzigen `/image/merge` Step gerendert wurden.
### `mosaic`: eine bündig ausgerichtete, kachelbasierte Collage
`mosaic` erstellt stattdessen eine bündig ausgerichtete Collage. Der Effekt liest das Seitenverhältnis jeder Eingabe und berechnet eine Aufteilung, bei der Zeilen und Spalten am äußeren Rechteck ausgerichtet bleiben und zugleich die Form jedes Fotos berücksichtigt wird. Denken Sie an ein „bündig ausgerichtetes Flickr-Layout“, nicht an ein starres Raster mit festen Zellen.
Beide Effekte verwenden dieselben Einstellungen auf Leinwandebene:
* `width` und `height` definieren die Ausgabeleinwand (Standard: 1920×1200).
* `border` legt für `polaroid-stack` den Innenabstand der Leinwand und für `mosaic` die Breite der Zwischenräume fest.
* `background` füllt die Leinwand. Legen Sie den Wert auf `none` oder `transparent` (sowie `format: png` oder `webp`) fest, um einen Alphakanal zu erhalten.
* `seed` sorgt für ein deterministisches Layout.
* Mit `shuffle` kann der Robot die Reihenfolge der Eingaben vor dem Anordnen zufällig ändern.
`polaroid-stack` akzeptiert außerdem den Multiplikator `coverage` (Standard: `1.5`), wenn die Polaroids im Verhältnis zur Leinwand größer oder kleiner sein sollen. Wenn Sie `effect` weglassen, bleibt das bisherige Verhalten für einfache Sprite-Sheets erhalten — diesen Codepfad haben wir nicht verändert.
## Workflow von Anfang bis Ende durchlaufen
Hier sehen Sie eine vollständige Assembly, die alle Uploads der Benutzer verarbeitet, daraus eine polaroid-stack-Collage auf transparentem Hintergrund erstellt und sowohl die Originale als auch die Collage nach S3 exportiert:
```json
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"collage": {
"robot": "/image/merge",
"use": {
"steps": [":original"],
"bundle_steps": true
},
"effect": "polaroid-stack",
"width": 1920,
"height": 1200,
"format": "png",
"background": "none"
},
"exported": {
"robot": "/s3/store",
"use": [":original", "collage"],
"credentials": "my_s3_credentials"
}
}
}
```
Ersetzen Sie `polaroid-stack` durch `mosaic`, um stattdessen das Kachellayout zu erhalten. Alles andere bleibt unverändert.
## Welches Layout sich wann eignet
* Wählen Sie **`polaroid-stack`** für eine persönliche Atmosphäre oder einen Scrapbook-Look: Rückblicke mit nutzergenerierten Inhalten, Veranstaltungsgalerien oder E-Mails im Stil von „Ihr Jahr in Bildern“.
* Wählen Sie **`mosaic`** für einen klareren redaktionellen Look, bei dem jedes Foto vollständig sichtbar bleibt: Produktraster, Hero-Bereiche für Portfolios und Social-Media-Vorschauen aus mehreren Eingaben.
* Bleiben Sie beim einfachen Sprite-Sheet (ohne `effect`), wenn Sie tatsächlich ein Sprite-Sheet benötigen — für CSS-Sprites, kachelbare Hintergründe oder andere Anwendungsfälle, in denen exakt einheitliche Zellen wichtiger als die Ästhetik sind.
## Jetzt ausprobieren
Die beiden neuen Effekte sind ab sofort unter [/image/merge](/de/docs/robots/image-merge.md) verfügbar. Wenn Sie ein Transloadit-Konto haben, können Sie sie am schnellsten im[Template Editor](/de/docs/topics/templates.md) ausprobieren. Fügen Sie das obige JSON ein, laden Sie einige Bilder hoch und passen Sie `width`, `coverage` oder `seed` an, bis das Layout Ihren Vorstellungen entspricht.
Wir haben diese Werkzeuge entwickelt, weil wir immer wieder gesehen haben, dass Kunden mehrereRobots kombinieren, um ein ähnliches Ergebnis zu erzielen. Wenn Ihnen eine dritte Collage-Form helfen würde — etwa ein Raster mit abgerundeten Ecken, ein Filmstreifen oder eine diagonale Überlappung — lassen Sie es uns wissen. Wir prüfen dann, ob wir sie als weiteren Wert für `effect` hinzufügen können.
Probieren Sie die Effekte mit diesen ausführbaren Demos aus:
* [Eine polaroid-stack-Collage erstellen EN (English)](/demos/image-processing/polaroid-stack-collage.md)
* [Eine bündig ausgerichtete mosaic-Collage erstellen EN (English)](/demos/image-processing/mosaic-collage.md)
[#image-merge-robot](/de/blog/tags/image-merge-robot.md)[#image-processing-service](/de/blog/tags/image-processing-service.md)[#walkthrough](/de/blog/tags/walkthrough.md)
### 👩💻 Werden Sie Teil einer Community mit 20k+ Entwicklern
Abonnieren Sie unseren [monatlichen Newsletter EN (English)](/newsletters.md) und erhalten Sie direkte Links zu 3 exklusiven Tech-Beiträgen und 2 Produkt-Updates. Nicht mehr und nicht weniger.
Ihre E-Mail:
Zugang erhalten
## Datei-Uploads und Encoding leicht gemacht.
Transloadit vereinfacht das Dateihandling für Entwickler; Marken wie Coursera und The New York Times vertrauen auf die Plattform. Wir stehen für eine zuverlässige API, erstklassigen Support und ein starkes Engagement für Open Source; Projekte wie [Uppy](https://uppy.io) und [tus](https://tus.io) setzen Standards in der Dateiverarbeitung.
[Registrieren](/c/)[Demo buchen](https://survey.typeform.com/to/kRg47Xi5)
Keine Kreditkarte erforderlich · 5 GB im kostenlosen Tarif enthalten
Jederzeit kündbar