Efeitos de colagem para /image/merge: polaroid-stack e mosaic

Kevin van Zonneveld

Cofundador · Amsterdã, Países Baixos · Mostrar biografia

Nosso Robot 🤖 /image/merge sempre foi a nossa escolha para juntar imagens, mas até agora ele só gerava sprite sheets simples, horizontais ou verticais. Ótimo para folhas de contato e mapas de sprites, mas um pouco rígido para qualquer coisa que precise ser compartilhada com pessoas.

Hoje, estamos adicionando dois layouts de colagem estilizados ao mesmo Robot: polaroid-stack e mosaic.

A ideia é simples: para o fluxo de trabalho mais comum, “transformar N uploads em uma única imagem bonita”, o caminho mais rápido deveria ser um único Step que você pode usar sem montar um canvas na mão. Nada de coreografia com um Robot de composição, nada de cálculos de geometria, nada de escolher onde cada foto vai ficar.

Dois efeitos, um Robot

Você escolhe o layout com o novo 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 um canvas

polaroid-stack dispõe as entradas como fotos instantâneas sobrepostas sobre um canvas colorido, com uma sombra projetada sutil e uma inclinação aleatória para cada foto. Os resultados são determinísticos para o mesmo seed, então você pode fixar um layout assim que gostar dele.

Por baixo dos panos, calculamos quantas fotos por linha cabem no canvas, dimensionamos o papel da polaroid para que a foto dentro dele continue quadrada, posicionamos cada uma em um leve ângulo pseudoaleatório e, por padrão, compomos o resultado sobre um fundo bege com aspecto de papel.

A imagem de 1200×630 no topo deste post é o efeito polaroid-stack com seis entradas, toda renderizada a partir de um único Step /image/merge.

mosaic: uma colagem justificada, baseada em blocos

Já o mosaic monta uma colagem justificada. Ele lê a proporção de cada entrada e calcula uma divisão que mantém linhas e colunas alinhadas no retângulo externo, respeitando o formato de cada foto. Pense em “layout justificado do Flickr”, não em uma grade rígida de células fixas.

Os dois efeitos compartilham os mesmos ajustes de canvas:

• width e height definem o canvas de saída (padrão 1920×1200).
• border é o preenchimento do canvas no polaroid-stack e a largura do espaçamento entre as fotos no mosaic.
• background preenche o canvas; defina-o como none ou transparent (e format: png ou webp) para obter um canal alfa.
• seed torna o layout determinístico.
• shuffle permite que o Robot embaralhe a ordem das entradas antes de montar o layout.

polaroid-stack também aceita um multiplicador coverage (padrão 1.5) se você quiser polaroids maiores ou menores em relação ao canvas. O comportamento de sprite sheet simples continua disponível quando você omite effect. Não mexemos nesse trecho do código.

Execute tudo do início ao fim

Aqui está uma Assembly completa que recebe tudo o que o usuário enviar por upload, monta uma colagem polaroid-stack sobre um fundo transparente e exporta tanto os originais quanto a colagem para o 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"
    }
  }
}

Troque polaroid-stack por mosaic para obter o layout em blocos. Todo o resto continua igual.

Quando escolher cada um

• Escolha polaroid-stack quando a proposta for pessoal ou com cara de scrapbook: retrospectivas de conteúdo gerado por usuários, galerias de eventos, e-mails no estilo “seu ano em fotos”.
• Escolha mosaic quando quiser um visual mais limpo e editorial, em que cada foto fica totalmente visível: grades de produtos, seções hero de portfólio e prévias para redes sociais criadas a partir de um lote de entradas.
• Fique com o sprite sheet simples (sem effect) quando você realmente quiser um sprite sheet: para sprites CSS, fundos repetíveis ou qualquer outro caso em que células exatas e uniformes importam mais que a estética.

Experimente

Os dois novos efeitos já estão disponíveis em /image/merge. Se você tem uma conta na Transloadit, a forma mais rápida de brincar com eles é no Template Editor. Cole o JSON acima, faça upload de algumas imagens e vá ajustando width, coverage ou seed até o layout ficar do seu jeito.

Criamos essas ferramentas porque víamos com frequência clientes combinando vários Robots para chegar a algo parecido. Se houver um terceiro formato de colagem que seria útil para você, como uma grade com cantos arredondados, uma tira de filme ou uma sobreposição diagonal, fale com a gente e vamos estudar a possibilidade de adicioná-lo como outro valor de effect.

Teste os efeitos com estas demonstrações executáveis:

• Criar uma colagem polaroid-stack EN (English)
• Criar uma colagem em mosaico justificada EN (English)