Mesclar várias imagens em uma única imagem

🤖/image/merge combina várias imagens em uma única folha de sprites.

Exemplo de uso

{
  "steps": {
    "merged": {
      "border": 5,
      "robot": "/image/merge",
      "use": {
        "bundle_steps": true,
        "steps": [
          ":original"
        ]
      }
    }
  }
}

Parâmetros

• interpolate

  boolean | Record<string, boolean>

  Controla se as Assembly Variables são interpoladas em campos individuais de instruções.

  Por padrão, a maioria dos campos de instruções dos Robots interpola Assembly Variables. Defina isso como false para tratar todos os campos de instruções como texto literal, ou defina o caminho de um campo individual como false para tratar apenas esse campo como texto literal. Para campos específicos de um Robot que são literais por padrão, defina isso como true ou defina o caminho desse campo como true para voltar a usar a interpolação.

  Use nomes de campos como path ou caminhos com pontos como ffmpeg.vf para objetos aninhados.

• output_meta

  Record<string, boolean> | boolean | Array<string>

  Permite especificar um conjunto de metadados cujo cálculo exige mais CPU e que, por isso, vem desativado por padrão para manter o processamento das suas Assemblies rápido.

  Para imagens, você pode adicionar "has_transparency": true neste objeto para extrair se a imagem contém partes transparentes e "dominant_colors": true para extrair um array de códigos de cores hexadecimais da imagem.

  Para imagens, você também pode adicionar "blurhash": true para extrair uma string BlurHash⁠ — uma representação compacta de um placeholder da imagem, útil para exibir uma prévia desfocada enquanto a imagem completa carrega.

  Para vídeos, você pode adicionar o parâmetro "colorspace": true para extrair o espaço de cores do vídeo de saída.

  Para vídeos, você também pode adicionar "interlaced": true para detectar se o vídeo é entrelaçado. Isso combina a flag computacionalmente barata field_order do ffprobe com uma passagem de amostragem idet limitada sobre os primeiros quadros da origem, expondo interlaced, field_order e um objeto de diagnóstico interlace_detection em file.meta. Isso é computacionalmente caro e cobrado de acordo.

  Para áudio, você pode adicionar "mean_volume": true para obter um único valor que representa o volume médio do arquivo de áudio.

  Você também pode definir isso como false para pular a extração de metadados e acelerar a transcodificação.

• user_meta

  Record<string, any>(padrão: {})

  Adiciona metadados JSON personalizados a cada arquivo emitido sem modificar seu conteúdo. Objetos e arrays aninhados são suportados.

  A herança depende do Robot. Os valores são mesclados com o user_meta existente no arquivo de saída; o Step atual substitui as chaves de nível superior com o mesmo nome. Atribua explicitamente as chaves necessárias quando um Robot criar novas saídas.

  Nos Steps de processamento, ${file.*} se refere à primeira entrada e ${result.*} ao arquivo emitido. Os valores são avaliados para cada saída após a execução do Robot, antes da extração subsequente de metadados e do armazenamento temporário. Em :original, os valores são avaliados para cada upload antes da extração de metadados.

  Os Steps subsequentes leem ${file.user_meta.key}. Consulte Metadados personalizados para ver um exemplo completo e as regras de herança.

• result

  boolean(padrão: false)

  Se os resultados deste Step devem estar presentes no Assembly Status JSON

• queue

  batch

  Definir a fila como “batch” rebaixa manualmente a prioridade dos Jobs deste Step, para evitar o consumo de vagas prioritárias de Jobs em Jobs que não precisam de tempo zero de espera na fila

• force_accept

  boolean(padrão: false)

  Forçar um Robot a aceitar um tipo de arquivo que ele teria ignorado.

  Por padrão, os Robots ignoram arquivos que não conhecem. O 🤖/video/encode, por exemplo, ignora tranquilamente imagens de entrada.

  Com o parâmetro force_accept definido como true, você pode forçar os Robots a aceitar todos os arquivos enviados a eles. Isso normalmente leva a erros e só deve ser usado para depuração ou para lidar com casos extremos.

• ignore_errors

  boolean | Array<meta | execute>(padrão: [])

  Ignorar erros durante fases específicas do processamento.

  Definir isso como ["meta"] fará com que o Robot ignore erros durante a extração de metadados.

  Definir isso como ["execute"] fará com que o Robot ignore erros durante a fase principal de execução.

  Definir isso como true equivale a ["meta", "execute"] e fará com que erros sejam ignorados nas duas fases.

• use

  string | Array<string> | Array<object> | object

  Especifica quais Steps usar como entrada.

  • Você pode escolher qualquer nome para os Steps, exceto ":original" (reservado para uploads de usuários tratados pela Transloadit)
  • Você pode fornecer vários Steps como entrada usando arrays:

    {
      "use": [
        ":original",
        "encoded",
        "resized"
      ]
    }
    

  • Você também pode marcar os Steps de entrada com as para transmitir intenção semântica aos Robots:

    {
      "use": [
        {
          "name": ":original",
          "as": "image"
        },
        {
          "name": ":original",
          "as": "mask"
        }
      ]
    }
    

  Dica

  Provavelmente é tudo o que você precisa saber sobre use, mas você pode ver os casos de uso avançados.

• format

  jpg | png | webp(padrão: "png")

  O formato de saída da imagem modificada.

• direction

  horizontal | vertical | grid(padrão: "horizontal")

  Especifica a direção em que as imagens são exibidas.

  Use grid para organizar as entradas da esquerda para a direita e de cima para baixo.

  Aplica-se apenas ao layout padrão de spritesheet. É ignorado quando effect é definido como polaroid-stack ou mosaic, pois esses efeitos usam seus próprios algoritmos de layout.

• effect

  mosaic | polaroid-stack

  Aplica um layout de colagem estilizado em vez de uma spritesheet horizontal ou vertical simples.

  Atualmente, oferece suporte a polaroid-stack, que renderiza as entradas como fotos instantâneas sobrepostas em uma tela, e a mosaic, que cria uma colagem de blocos com alinhamento justificado.

• columns

  string | number

  Número de colunas no layout de grade. Aplica-se apenas quando direction é grid.

  Se omitido, o número de colunas é calculado automaticamente a partir do número de entradas e de linhas solicitadas.

• rows

  string | number

  Número de linhas no layout de grade. Aplica-se apenas quando direction é grid.

  Se omitido, o número de linhas é calculado automaticamente a partir do número de entradas e de colunas solicitadas.

• cell_width

  string | number

  Largura uniforme de cada célula da grade em pixels. Aplica-se apenas quando direction é grid.

  As imagens são redimensionadas para caber na célula, preservando a proporção.

• cell_height

  string | number

  Altura uniforme de cada célula da grade em pixels. Aplica-se apenas quando direction é grid.

  As imagens são redimensionadas para caber na célula, preservando a proporção.

• border

  string | number(padrão: 0)

  Um valor inteiro que define o espaçamento entre as imagens na spritesheet.

  Um valor de 10 faria com que as imagens tivessem o maior espaçamento entre si, enquanto um valor de 1 colocaria as imagens lado a lado.

  Quando effect é polaroid-stack, esse valor é usado como preenchimento interno da tela, de modo que as fotos mais externas mantenham essa quantidade de pixels de distância da borda.

  Quando effect é mosaic, esse valor é usado tanto como preenchimento interno nas bordas da tela quanto como largura do espaçamento entre blocos vizinhos.

• background

  string | transparent | none | black | white | red | green | blue | mais 6 ↓(padrão: "#fff")

  O código hexadecimal ou o nome⁠ da cor usada para preencher o fundo (exibido apenas com uma borda > 1).

  Por padrão, o fundo de imagens transparentes é alterado para branco. Defina como none ou transparent para uma tela transparente; defina format como png ou webp para preservar o canal alfa.

  Para detalhes sobre como preservar a transparência em todos os tipos de imagem, veja esta demonstração EN (English).

• width

  string | number

  A largura da tela de saída em pixels.

  É usada principalmente por efeitos estilizados como polaroid-stack e mosaic.

• height

  string | number

  A altura da tela de saída em pixels.

  É usada principalmente por efeitos estilizados como polaroid-stack e mosaic.

• seed

  string | number

  Semente determinística opcional usada por efeitos estilizados como polaroid-stack e mosaic.

• shuffle

  boolean(padrão: false)

  Define se efeitos estilizados como polaroid-stack e mosaic podem embaralhar a ordem das entradas antes de organizar a tela.

• sort_by

  auto | basename | import_order(padrão: "basename")

  Controla como as entradas agrupadas são ordenadas quando nenhum alias numerado explícito para o tipo de entrada é usado. Aliases numerados terminam com um sufixo numérico, como _1.

  O padrão "basename" mantém o comportamento legado de ordenação natural por basename.

  Defina como "import_order" para preservar a ordem dos Steps de importação baseados em array quando todos os arquivos de entrada carregarem metadados completos de ordem de importação. "auto" tem a mesma preferência de ordem de importação, com ordenação natural por basename como fallback.

• coverage

  string | number

  Multiplicador de cobertura de área para o efeito polaroid-stack. Controla o tamanho de cada polaroid em relação à tela e, consequentemente, quanto da tela é coberto pelas fotos.

  O valor padrão de 1.5 deixa uma borda bege sutil ao longo de algumas extremidades. Use de 2.0 a 2.5 para cobertura de ponta a ponta (as fotos se sobrepõem mais). Valores abaixo de 1.0 produzem polaroids menores e mais espaçadas.

  Não tem efeito no estilo mosaic nem em spritesheets simples.

• adaptive_filtering

  boolean(padrão: false)

  Controla a compressão de imagens PNG. Definir como true resulta em arquivos menores, mas aumenta o tempo de processamento. Recomendamos manter essa opção desativada.

• quality

  string | number(padrão: 100)

  Controla a compressão de imagens JPG, PNG e WebP. Consulte também 🤖/image/optimize.

Demonstrações

Publicações relacionadas no blog