Efectos de collage para /image/merge: polaroid-stack y mosaic

Kevin van Zonneveld

Cofundador · Ámsterdam, Países Bajos · Mostrar bio

Nuestro Robot 🤖 /image/merge EN (English) ha sido nuestra opción habitual para unir imágenes, pero hasta ahora solo producía hojas de sprites sencillas, horizontales o verticales. Son excelentes para planchas de contactos fotográficas y mapas de sprites, pero algo rígidas para cualquier contenido que deba compartirse con personas.

Hoy añadimos dos diseños de collage con estilo al mismo Robot: polaroid-stack y mosaic.

La idea es sencilla: para el flujo de trabajo habitual de «convertir N imágenes subidas en una sola imagen atractiva», la ruta más rápida debe ser un único Step que puedas usar sin tener que crear un lienzo manualmente. Sin coordinar Robots de composición, calcular geometría ni elegir dónde va cada foto.

Dos efectos, un Robot

Elige el diseño con el nuevo parámetro effect:

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

polaroid-stack: fotos instantáneas sobre un lienzo

polaroid-stack distribuye las entradas como fotos instantáneas superpuestas sobre un lienzo de color, con una sutil sombra paralela y una inclinación aleatoria para cada foto. Los resultados son deterministas con el mismo seed, por lo que puedes fijar un diseño cuando te guste.

De forma interna, calculamos cuántas fotos por fila caben en el lienzo, dimensionamos el marco estilo polaroid para que la toma interior permanezca cuadrada, colocamos cada foto con un ligero ángulo pseudoaleatorio y componemos el resultado sobre un fondo beige similar al papel de forma predeterminada.

La imagen de 1200×630 de la parte superior de esta publicación usa el efecto polaroid-stack con seis entradas, todas renderizadas desde un único Step /image/merge.

mosaic: un collage justificado basado en mosaicos

mosaic, en cambio, crea un collage justificado. Lee la relación de aspecto de cada entrada y calcula una distribución que mantiene las filas y columnas alineadas con el rectángulo exterior, a la vez que respeta la forma de cada foto. Piensa en un «diseño justificado de Flickr», no en una cuadrícula rígida de celdas fijas.

Ambos efectos comparten los mismos controles a nivel del lienzo:

• width y height definen el lienzo de salida (1920×1200 de forma predeterminada).
• border es el relleno del lienzo para polaroid-stack y el ancho de separación para mosaic.
• background rellena el lienzo; configúralo como none o transparent (y como format: png o webp) para obtener un canal alfa.
• seed hace que el diseño sea determinista.
• shuffle permite que el Robot aleatorice el orden de las entradas antes de distribuirlas.

polaroid-stack también acepta un multiplicador coverage (1.5 de forma predeterminada) si quieres fotos estilo polaroid más grandes o más pequeñas en relación con el lienzo. El comportamiento de la hoja de sprites sencilla sigue disponible cuando omites effect; no modificamos esa ruta de código.

Ejecútalo de principio a fin

Aquí tienes una Assembly completa que toma todo lo que suba el usuario, crea un collage polaroid-stack sobre un fondo transparente y exporta tanto los originales como el collage a 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"
    }
  }
}

Sustituye polaroid-stack por mosaic para obtener el diseño de mosaico. Todo lo demás permanece igual.

Cuándo elegir cada opción

• Elige polaroid-stack cuando busques un ambiente personal o de álbum de recortes: resúmenes de contenido generado por usuarios, galerías de eventos y emails con el estilo «tu año en fotos».
• Elige mosaic cuando quieras un aspecto editorial más limpio en el que cada foto permanezca completamente visible: cuadrículas de productos, secciones principales de portafolios y vistas previas para redes sociales creadas a partir de un lote de entradas.
• Usa la hoja de sprites sencilla (sin effect) cuando realmente quieras una hoja de sprites, por ejemplo, para sprites de CSS, fondos en mosaico o cualquier otro lugar donde las celdas exactamente uniformes importen más que la estética.

Pruébalo

Los dos nuevos efectos ya están disponibles en /image/merge EN (English). Si tienes una cuenta de Transloadit, la forma más rápida de probarlos es en el Template Editor. Pega el JSON anterior, sube varias imágenes y ajusta width, coverage o seed hasta que el diseño se vea bien.

Creamos estas herramientas porque veíamos que los clientes combinaban varios Robots para conseguir algo similar. Si hay una tercera forma de collage que te resultaría útil, como una cuadrícula con esquinas redondeadas, una tira de película o una superposición diagonal, cuéntanoslo y evaluaremos añadirla como otro valor de effect.

Prueba los efectos con estas demos ejecutables:

• Crea un collage polaroid-stack EN (English)
• Crea un collage de mosaico justificado EN (English)