Effets de collage pour /image/merge : polaroid-stack et mosaic

Kevin van Zonneveld

Cofondateur · Amsterdam, Pays-Bas · Afficher la bio

Notre Robot 🤖 /image/merge est notre outil de prédilection pour assembler des images, mais jusqu’ici, il ne produisait que de simples planches de sprites horizontales ou verticales. C’est parfait pour les planches-contact et les cartes de sprites, mais un peu rigide pour des images destinées à être partagées avec des personnes.

Aujourd’hui, nous ajoutons deux mises en page de collage stylisées à ce même Robot : polaroid-stack et mosaic.

L’idée est simple : pour le flux de travail le plus courant, qui consiste à « transformer N téléversements en une seule belle image », la voie la plus rapide devrait être un seul Step utilisable sans avoir à créer un canevas à la main. Pas d’orchestration de Robots de composition, pas de calculs géométriques, pas besoin de choisir l’emplacement de chaque photo.

Deux effets, un Robot

Vous choisissez la mise en page avec le nouveau paramètre effect :

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

polaroid-stack : des photos instantanées sur un canevas

polaroid-stack dispose les images d’entrée comme des photos instantanées superposées sur un canevas coloré, avec une ombre portée discrète et une inclinaison aléatoire pour chaque photo. Les résultats sont déterministes pour une même valeur de seed, ce qui vous permet de conserver une mise en page dès qu’elle vous plaît.

En coulisses, nous calculons combien de photos par ligne tiennent sur le canevas, dimensionnons le papier polaroid pour que la photo à l’intérieur reste carrée, plaçons chaque photo avec une légère inclinaison pseudo-aléatoire, puis composons le résultat sur un fond beige façon papier par défaut.

L’image 1200×630 en haut de cet article utilise l’effet polaroid-stack avec six images d’entrée, toutes rendues à partir d’un seul Step /image/merge.

mosaic : un collage justifié en tuiles

mosaic crée quant à lui un collage justifié. Il lit le rapport largeur/hauteur de chaque image d’entrée et calcule une répartition qui aligne les lignes et les colonnes sur le rectangle extérieur. Chaque photo est recadrée au centre pour remplir sa tuile. Pensez à une « mise en page justifiée à la Flickr », plutôt qu’à une grille rigide de cellules fixes.

Les deux effets partagent les mêmes réglages du canevas :

• width et height définissent les dimensions du canevas de sortie (1920×1200 par défaut).
• border définit la marge intérieure du canevas pour polaroid-stack et la largeur des gouttières pour mosaic.
• background remplit le canevas ; définissez sa valeur sur none ou transparent (et format: png ou webp) pour obtenir un canal alpha.
• seed rend la mise en page déterministe.
• shuffle permet au Robot de mélanger aléatoirement l’ordre des images d’entrée avant de les disposer.

polaroid-stack accepte également un multiplicateur coverage (1.5 par défaut) si vous souhaitez des polaroids plus grands ou plus petits par rapport au canevas. Le comportement des planches de sprites simples reste disponible si vous omettez effect — nous n’avons pas modifié cette partie du code.

Exécuter le flux de travail de bout en bout

Voici une Assembly complète qui prend tout ce que l’utilisateur téléverse, crée un collage polaroid-stack sur fond transparent et exporte les originaux ainsi que le collage vers S3 :

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

Remplacez polaroid-stack par mosaic pour obtenir la mise en page en tuiles. Tout le reste demeure identique.

Quand choisir chaque effet

• Choisissez polaroid-stack pour une ambiance personnelle ou façon album de souvenirs : récapitulatifs de contenus créés par les utilisateurs, galeries d’événements, e-mails du type « votre année en photos ».
• Choisissez mosaic pour un aspect plus épuré, de style éditorial, avec une tuile par photo : grilles de produits, sections principales de portfolios et aperçus pour les réseaux sociaux créés à partir d’un lot d’images d’entrée.
• Conservez la planche de sprites simple (sans effect) lorsque c’est bien ce qu’il vous faut — pour des sprites CSS, des fonds répétables ou tout autre usage où des cellules parfaitement uniformes comptent davantage que l’esthétique.

Essayer les effets

Les deux nouveaux effets sont désormais disponibles sur /image/merge. Si vous avez un compte Transloadit, le moyen le plus rapide de les essayer est d’utiliser Template Editor. Collez le JSON ci-dessus, téléversez quelques images, puis ajustez width, coverage ou seed jusqu’à ce que la mise en page vous convienne.

Nous avons créé ces outils parce que nous voyions régulièrement des clients combiner plusieurs Robots pour obtenir un résultat similaire. Si une troisième forme de collage vous serait utile — une grille aux coins arrondis, une bande de pellicule ou une superposition en diagonale — faites-le-nous savoir et nous étudierons son ajout comme nouvelle valeur de effect.

Essayez les effets avec ces démonstrations exécutables :

• Créer un collage polaroid-stack EN (English)
• Créer un collage mosaïque justifié EN (English)