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

Kevin van Zonneveld

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

Nuestro Robot 🤖 /image/merge ha sido nuestra opción habitual para unir imágenes, pero hasta ahora solo producía hojas de sprites simples, horizontales o verticales. Ideales para hojas de contacto y mapas de sprites, pero algo rígidas para cualquier contenido que se quiera compartir 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 más habitual de «convertir N subidas en una sola imagen atractiva», la vía más rápida debería ser un único Step al que puedas recurrir sin crear un lienzo a mano. Sin coordinar Robots de composición, sin cálculos geométricos ni decidir 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 imágenes de entrada como fotos instantáneas superpuestas sobre un lienzo de color, con una sombra sutil y una inclinación aleatoria para cada foto. Los resultados son deterministas si se usa el mismo seed, así que puedes fijar un diseño cuando te guste.

Internamente calculamos cuántas fotos por fila caben en el lienzo, ajustamos el tamaño del papel polaroid para que la foto en su interior siga siendo cuadrada, colocamos cada una con un ligero ángulo pseudoaleatorio y componemos el resultado sobre un fondo beige con aspecto de papel de forma predeterminada.

La imagen de 1200×630 al principio de este artículo usa el efecto polaroid-stack con seis imágenes de entrada, todas procesadas en un único Step /image/merge.

mosaic: un collage justificado de celdas

mosaic, en cambio, crea un collage justificado. Lee la relación de aspecto de cada imagen de entrada y calcula una distribución que mantiene las filas y columnas alineadas con el rectángulo exterior. Cada foto se recorta desde el centro para llenar su celda. Piensa en un «diseño justificado de Flickr», no en una cuadrícula rígida de celdas fijas.

Ambos efectos comparten los mismos controles del lienzo:

• width y height definen el lienzo de salida (1920×1200 de forma predeterminada).
• border define el margen interior del lienzo para polaroid-stack y el ancho de separación entre celdas para mosaic.
• background rellena el lienzo; configúralo como none o transparent (y 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 imágenes de entrada antes de distribuirlas.

polaroid-stack también admite un multiplicador coverage (1.5 de forma predeterminada) si quieres polaroids más grandes o más pequeñas en relación con el lienzo. El comportamiento de las hojas de sprites simples sigue presente cuando omites effect; no hemos modificado esa ruta del código.

Ejecuta el flujo de principio a fin

Esta es una Assembly completa que toma todo lo que sube 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 celdas. Todo lo demás sigue igual.

Cuándo elegir cada opción

• Elige polaroid-stack cuando busques un estilo personal o de álbum de recortes: recopilaciones de contenido generado por usuarios, galerías de eventos o emails del tipo «tu año en fotos».
• Elige mosaic cuando quieras un aspecto más limpio y editorial con una celda para cada foto: cuadrículas de productos, secciones principales de portafolios y vistas previas para redes sociales creadas a partir de un lote de imágenes de entrada.
• Mantén la hoja de sprites simple (sin effect) cuando realmente quieras una hoja de sprites, ya sea para sprites CSS, fondos repetibles o cualquier otro caso en el que las celdas exactamente uniformes importen más que la estética.

Pruébalo

Los dos nuevos efectos ya están disponibles en /image/merge. Si tienes una cuenta de Transloadit, la forma más rápida de experimentar con ellos es en el Template Editor. Pega el JSON anterior, sube unas cuantas imágenes y ajusta width, coverage o seed hasta que el diseño te convenza.

Creamos estas herramientas porque veíamos constantemente que los clientes combinaban varios Robots para aproximarse al mismo resultado. 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 estudiaremos añadirla como otro valor de effect.

Prueba los efectos con estos ejemplos que puedes ejecutar:

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