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

Kevin van Zonneveld

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

Nosso Robot 🤖 /image/merge tem sido nossa escolha para juntar imagens, mas até agora só produzia folhas de sprites simples, horizontais ou verticais. Ótimas para folhas de contato e mapas de sprites, mas um pouco rígidas para imagens que precisam ser compartilhadas com pessoas.

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

A ideia é simples: para o fluxo mais comum de “transformar N uploads em uma única imagem bonita”, o caminho mais rápido deve ser um único Step que você possa usar sem montar uma tela manualmente. Sem orquestrar Robots de composição, sem cálculos geométricos, sem 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 em uma tela

polaroid-stack distribui as imagens de entrada como fotos instantâneas sobrepostas em uma tela colorida, com uma sombra sutil e uma inclinação aleatória para cada foto. Os resultados são determinísticos com o mesmo seed, então você pode fixar um layout quando gostar dele.

Nos bastidores, calculamos quantas fotos por linha cabem na tela, dimensionamos o papel da polaroid para que a foto dentro dele permaneça quadrada, posicionamos cada uma em um ângulo levemente pseudoaleatório e compomos o resultado sobre um fundo bege com aparência de papel por padrão.

A imagem de 1200×630 no topo deste post usa o efeito polaroid-stack com seis imagens de entrada, todas renderizadas em um único Step /image/merge.

mosaic: uma colagem justificada em blocos

Já mosaic cria uma colagem justificada. Ele lê a proporção de cada imagem de entrada e calcula uma divisão que mantém linhas e colunas alinhadas às bordas do retângulo externo. Cada foto é recortada a partir do centro para preencher seu bloco. Pense no “layout justificado do Flickr”, em vez de uma grade rígida de células fixas.

Os dois efeitos compartilham os mesmos controles para a tela:

• width e height definem a tela de saída (padrão 1920×1200).
• border define a margem interna da tela para polaroid-stack e a largura do espaçamento entre blocos para mosaic.
• background preenche a tela; defina seu valor 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 imagens de entrada 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 à tela. O comportamento de folha de sprites simples continua disponível quando você omite effect; não alteramos esse caminho de execução no código.

Execute o fluxo do início ao fim

Aqui está uma Assembly completa que recebe tudo o que o usuário enviar por upload, cria uma colagem polaroid-stack sobre um fundo transparente e exporta os originais e 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 permanece igual.

Quando escolher cada opção

• Escolha polaroid-stack quando quiser um visual pessoal ou de álbum de recortes: 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, com um bloco para cada foto: grades de produtos, seções de destaque de portfólios e prévias para redes sociais criadas a partir de um lote de imagens de entrada.
• Continue usando a folha de sprites simples (sem effect) quando você realmente quiser uma folha de sprites: para sprites CSS, fundos repetíveis ou qualquer outro caso em que células exatamente uniformes sejam mais importantes do que a estética.

Experimente

Os dois novos efeitos já estão disponíveis no /image/merge. Se você tem uma conta na Transloadit, a maneira mais rápida de experimentar é no Template Editor. Cole o JSON acima, faça upload de algumas imagens e ajuste width, coverage ou seed até gostar do layout.

Criamos essas ferramentas porque víamos repetidamente 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, avise a gente e vamos avaliar a possibilidade de adicioná-lo como outro valor de effect.

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

• Criar uma colagem polaroid-stack EN (English)
• Criar uma colagem de mosaico justificado EN (English)