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

Kevin van Zonneveld

Mitgründer · Amsterdam, Niederlande · Bio anzeigen

Unser Robot 🤖 /image/merge ist seit Langem unsere erste Wahl, um Bilder zusammenzufügen. Bisher erzeugte er allerdings nur schlichte horizontale oder vertikale Sprite-Sheets. Ideal für Kontaktabzüge und Sprite-Maps, aber etwas starr für Inhalte, die man mit Menschen teilen möchte.

Heute ergänzen wir denselben Robot um zwei Collage-Layouts: polaroid-stack und mosaic.

Die Idee ist einfach: Für den häufigsten Workflow „N Uploads in ein schönes Bild verwandeln“ sollte der schnellste Weg ein einziger Step sein, den Sie ohne selbst programmierte Zeichenfläche nutzen können. Keine aufwendige Abstimmung von Robots zum Zusammenfügen, keine Geometrieberechnungen, keine manuelle Platzierung der einzelnen Fotos.

Zwei Effekte, ein Robot

Das Layout wählen Sie mit dem neuen Parameter effect:

{
  "steps": {
    "collage": {
      "robot": "/image/merge",
      "use": { "steps": [":original"], "bundle_steps": true },
      "effect": "polaroid-stack",
      "width": 1920,
      "height": 1200
    }
  }
}

polaroid-stack: Sofortbilder auf einer Zeichenfläche

polaroid-stack ordnet die Eingaben als überlappende Sofortbilder auf einer farbigen Zeichenfläche an, mit einem dezenten Schlagschatten und einer zufälligen Neigung für jedes Foto. Bei gleichem seed sind die Ergebnisse deterministisch. So können Sie Ihr Layout beibehalten, sobald es Ihnen gefällt.

Intern berechnen wir, wie viele Fotos pro Reihe auf die Zeichenfläche passen. Wir bemessen das Polaroidpapier so, dass das Foto darin quadratisch bleibt, platzieren jedes Foto mit einer leichten, pseudozufälligen Neigung und fügen das Ergebnis standardmäßig auf einem beigen, papierartigen Hintergrund zusammen.

Das Bild mit 1200×630 Pixeln am Anfang dieses Beitrags zeigt den Effekt polaroid-stack mit sechs Eingaben. Alles wurde in einem einzigen Step mit /image/merge erzeugt.

mosaic: eine bündig ausgerichtete Kachelcollage

mosaic erstellt dagegen eine bündig ausgerichtete Collage. Der Effekt liest das Seitenverhältnis jeder Eingabe und ermittelt eine Aufteilung, bei der Reihen und Spalten am äußeren Rechteck ausgerichtet bleiben. Jedes Foto wird mittig zugeschnitten, um seine Kachel auszufüllen. Stellen Sie sich ein „bündiges Flickr-Layout“ vor, kein starres Raster mit festen Zellen.

Beide Effekte nutzen dieselben Einstellungen für die Zeichenfläche:

• width und height definieren die Ausgabezeichenfläche (Standard: 1920×1200).
• border legt den Randabstand für polaroid-stack und den Abstand zwischen den Kacheln für mosaic fest.
• background füllt die Zeichenfläche. Setzen Sie den Parameter auf none oder transparent (und format: png oder webp), um einen Alphakanal zu erhalten.
• seed macht das Layout deterministisch.
• Mit shuffle kann der Robot die Reihenfolge der Eingaben vor dem Anordnen zufällig verändern.

polaroid-stack unterstützt außerdem den Multiplikator coverage (Standard: 1.5), wenn Sie größere oder kleinere Polaroidfotos im Verhältnis zur Zeichenfläche wünschen. Die bisherige Funktion für schlichte Sprite-Sheets bleibt erhalten, wenn Sie effect weglassen. Diesen Codepfad haben wir nicht verändert.

Den gesamten Workflow ausführen

Hier ist eine vollständige Assembly, die alle Dateien verwendet, die der Nutzer hochlädt, 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 gleich.

Wann sich welches Layout eignet

• Wählen Sie polaroid-stack für einen persönlichen Stil mit Scrapbook-Charakter: Rückblicke mit nutzergenerierten Inhalten, Veranstaltungsgalerien oder E-Mails im Stil von „Ihr Jahr in Fotos“.
• Wählen Sie mosaic, wenn Sie einen klareren, redaktionellen Look mit einer Kachel für jedes Foto wünschen: Produktraster, Hero-Bereiche für Portfolios und Vorschauen für soziale Medien, die aus mehreren Eingaben entstehen.
• Bleiben Sie beim schlichten Sprite-Sheet (ohne effect), wenn Sie tatsächlich ein Sprite-Sheet brauchen: für CSS-Sprites, kachelbare Hintergründe oder überall dort, wo exakt gleichförmige Zellen wichtiger sind als die Ästhetik.

Ausprobieren

Die beiden neuen Effekte sind ab sofort für /image/merge verfügbar. Wenn Sie ein Transloadit-Konto haben, können Sie sie am schnellsten im Template Editor ausprobieren. Fügen Sie das JSON von oben ein, laden Sie eine Handvoll Bilder hoch und passen Sie width, coverage oder seed an, bis Ihnen das Layout gefällt.

Wir haben diese Werkzeuge entwickelt, weil wir immer wieder sahen, wie Kunden mehrere Robots kombinierten, um ein ähnliches Ergebnis zu erzielen. Wenn eine dritte Collage-Form für Sie nützlich wäre – 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 ergänzen können.

Probieren Sie die Effekte mit diesen ausführbaren Demos aus:

• Eine polaroid-stack-Collage erstellen EN (English)
• Eine bündig ausgerichtete Mosaikcollage erstellen EN (English)