Collage-Effekte für /image/merge: polaroid-stack und mosaic

Kevin van Zonneveld

Mitgründer · Amsterdam, Niederlande · Bio anzeigen

Unser Robot 🤖 /image/merge EN (English) 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:

{
  "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:

{
  "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 EN (English) verfügbar. Wenn Sie ein Transloadit-Konto haben, können Sie sie am schnellsten im Template Editor 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 mehrere Robots 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)
• Eine bündig ausgerichtete mosaic-Collage erstellen EN (English)