Última actualización: 16 de abril
# Efectos de collage para /image/merge: polaroid-stack y mosaic
**Kevin van Zonneveld**
Cofundador · Ámsterdam, Países Bajos · Mostrar bio
[](https://x.com/kvz)[](https://github.com/kvz)
Nuestro Robot [🤖 /image/merge](/es/docs/robots/image-merge.md) 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`:
```json
{
"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:
```json
{
"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](/es/docs/robots/image-merge.md). Si tienes una cuenta de Transloadit, la forma más rápida de probarlos es en el[Template Editor](/es/docs/topics/templates.md). 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 variosRobots 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)](/demos/image-processing/polaroid-stack-collage.md)
* [Crea un collage de mosaico justificado EN (English)](/demos/image-processing/mosaic-collage.md)
[#image-merge-robot](/es/blog/tags/image-merge-robot.md)[#image-processing-service](/es/blog/tags/image-processing-service.md)[#walkthrough](/es/blog/tags/walkthrough.md)
### 👩💻 Únete a más de 20k desarrolladores
Suscríbete a nuestro [boletín mensual EN (English)](/newsletters.md) para recibir enlaces directos a 3 artículos exclusivos sobre tecnología y 2 actualizaciones de producto. Ni más ni menos.
Tu email:
Obtén acceso
## Subida y encoding de archivos. Sin complicaciones.
Transloadit optimiza el manejo de archivos para desarrolladores, con la confianza de marcas como Coursera y The New York Times. Somos reconocidos por una API confiable, soporte de primer nivel y un firme compromiso con el código abierto, con proyectos como [Uppy](https://uppy.io) y el protocolo [tus](https://tus.io) que marcan estándares en el procesamiento de archivos.
[Regístrate](/c/)[Agenda una demo](https://survey.typeform.com/to/kRg47Xi5)
No necesitas tarjeta de crédito · 5 GB incluidos en el plan gratuito
Cancela en cualquier momento