Transloadit

Combinar varias imágenes en una sola imagen

🤖/image/merge combina varias imágenes en una sola hoja de sprites.

Robot /image/merge

El resultado final será una hoja de sprites, con las imágenes dispuestas horizontalmente, verticalmente o en una cuadrícula.

Se recomienda usar este Robot con 🤖/image/resize para que tus imágenes tengan un tamaño similar antes de combinarlas.

Ejemplo de uso

Combina las imágenes subidas en una sola, con una separación de 5 px entre ellas en la hoja de sprites:

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

Parámetros

  • interpolate

    boolean | Record<string, boolean>

    Controla si las Assembly Variables se interpolan en campos de instrucciones individuales.

    De forma predeterminada, la mayoría de los campos de instrucciones de los Robots interpolan Assembly Variables. Establece esta opción en false para tratar todos los campos de instrucciones como texto literal, o establece la ruta de un campo individual en false para tratar únicamente ese campo como texto literal. En el caso de los campos específicos de un Robot que son literales de forma predeterminada, establece esta opción en true o la ruta de ese campo en true para volver a habilitar la interpolación.

    Usa nombres de campos como path o rutas con puntos como ffmpeg.vf para los objetos anidados.

  • output_meta

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

    Te permite especificar un conjunto de metadatos cuyo cálculo requiere más recursos de CPU y que, por lo tanto, está desactivado de forma predeterminada para mantener el procesamiento de tus Assemblies rápido.

    Para imágenes, puedes añadir "has_transparency": true en este objeto para extraer si la imagen contiene partes transparentes y "dominant_colors": true para extraer un array de códigos de color hexadecimales de la imagen.

    Para imágenes, también puedes añadir "blurhash": true para extraer una cadena BlurHash, una representación compacta de un marcador de posición para la imagen que resulta útil para mostrar una vista previa desenfocada mientras se carga la imagen completa.

    Para imágenes, "thumbhash": true extrae en su lugar un ThumbHash codificado en base64 en meta.thumbhash, junto con meta.has_alpha (si existe un canal alfa, incluso cuando es totalmente opaco). Describe píxeles orientados según EXIF y usa el primer fotograma en el caso de imágenes animadas. La extracción se realiza según el mejor esfuerzo posible: las imágenes de más de 40 megapíxeles, los formatos no compatibles o una decodificación fallida o limitada no generan ningún marcador de posición. Una extracción exitosa añade un cargo de metadatos equivalente al 20 % de los bytes de ese archivo. No se aplica ningún recargo por ThumbHash cuando está desactivado o cuando no se genera ningún hash.

    Configura esta opción en el Step que genera la imagen, como /upload/handle para los originales subidos o /image/resize para las salidas procesadas. Configurarla únicamente en /transloadit/store no solicita la extracción: el almacenamiento conserva los metadatos del origen. Transloadit Storage conserva un hash generado junto con su versión inmutable y lo devuelve en los resultados almacenados y en las lecturas nativas de activos. Las subidas directas a S3 no generan marcadores de posición. Un marcador de posición contiene información de la imagen, por lo que debes protegerlo con los mismos controles de acceso que la imagen completa.

    Para videos, puedes añadir el parámetro "colorspace": true para extraer el espacio de color del video de salida.

    Para videos, también puedes añadir "interlaced": true para detectar si el video está entrelazado. Esto combina el indicador field_order de ffprobe, cuyo costo computacional es bajo, con una pasada de muestreo limitada mediante idet sobre los primeros fotogramas de la fuente, y expone interlaced, field_order y un objeto de diagnóstico interlace_detection en file.meta. Esto requiere muchos recursos computacionales y se factura en consecuencia.

    Para audio, puedes añadir "mean_volume": true para obtener un único valor que represente el volumen promedio del archivo de audio.

    También puedes establecer esto en false para omitir la extracción de metadatos y acelerar la transcodificación.

  • user_meta

    Record<string, any>(valor predeterminado: {})

    Añade metadatos JSON personalizados a cada archivo emitido sin modificar su contenido. Se admiten objetos y arrays anidados.

    La herencia depende del Robot. Los valores se combinan con los user_meta existentes en el archivo de salida; el Step actual reemplaza las claves coincidentes de nivel superior. Asigna explícitamente las claves necesarias cuando un Robot cree nuevos archivos de salida.

    En los Steps de procesamiento, ${file.*} hace referencia a la primera entrada y ${result.*} al archivo emitido. Los valores se evalúan para cada salida después de ejecutarse el Robot, antes de la posterior extracción de metadatos y del almacenamiento temporal. En :original, los valores se evalúan para cada subida antes de la extracción de metadatos.

    Los Steps posteriores leen ${file.user_meta.key}. Consulta Metadatos personalizados para ver un ejemplo completo y las reglas de herencia.

  • result

    boolean(valor predeterminado: false)

    Indica si los resultados de este Step deben aparecer en el Assembly Status JSON

  • queue

    batch

    Establecer la cola en «batch» reduce manualmente la prioridad de los Jobs de este Step para evitar consumir cupos prioritarios con Jobs que no necesitan un tiempo de espera cero en la cola

  • force_accept

    boolean(valor predeterminado: false)

    Forzar a un Robot a aceptar un tipo de archivo que habría ignorado.

    De forma predeterminada, los Robots ignoran los archivos que no reconocen. 🤖/video/encode, por ejemplo, ignorará sin problemas las imágenes de entrada.

    Si configuras el parámetro force_accept como true, puedes forzar a los Robots a aceptar todos los archivos que reciban. Esto normalmente provocará errores y solo debe usarse para depuración o para abordar casos extremos.

  • ignore_errors

    boolean | Array<meta | execute>(valor predeterminado: [])

    Ignorar errores durante fases específicas del procesamiento.

    Establecer este parámetro en ["meta"] hará que el Robot ignore los errores durante la extracción de metadatos.

    Establecer este parámetro en ["execute"] hará que el Robot ignore los errores durante la fase principal de ejecución.

    Configurar este parámetro como true equivale a ["meta", "execute"] y hará que se ignoren los errores en ambas fases.

  • use

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

    Especifica qué Step o Steps se usarán como entrada.

    • Puedes elegir cualquier nombre para los Steps, excepto ":original" (reservado para las subidas de usuarios gestionadas por Transloadit)
    • Puedes proporcionar varios Steps como entrada mediante arrays: 
      {
  "use": [
    ":original",
    "encoded",
    "resized"
  ]
}
    • También puedes etiquetar los Steps de entrada con as para comunicar la intención semántica a los Robots: 
      {
  "use": [
    {
      "name": ":original",
      "as": "image"
    },
    {
      "name": ":original",
      "as": "mask"
    }
  ]
}

  • format

    jpg | png | webp(valor predeterminado: "png")

    El formato de salida de la imagen modificada.

  • direction

    horizontal | vertical | grid(valor predeterminado: "horizontal")

    Especifica la dirección en la que se muestran las imágenes.

    Usa grid para ordenar las entradas de izquierda a derecha y de arriba abajo.

    Solo se aplica al diseño predeterminado de la hoja de sprites. Se ignora cuando effect se establece en polaroid-stack o mosaic, ya que esos efectos usan sus propios algoritmos de diseño.

  • effect

    mosaic | polaroid-stack

    Aplica un diseño de collage estilizado en lugar de una hoja de sprites horizontal o vertical sencilla.

    Actualmente admite polaroid-stack, que muestra las entradas como fotos instantáneas superpuestas sobre un lienzo, y mosaic, que crea un collage de mosaicos justificados.

  • columns

    string | number

    Número de columnas del diseño de cuadrícula. Solo se aplica cuando direction es grid.

    Si se omite, las columnas se calculan automáticamente a partir del número de entradas y las filas solicitadas.

  • rows

    string | number

    Número de filas del diseño de cuadrícula. Solo se aplica cuando direction es grid.

    Si se omite, las filas se calculan automáticamente a partir del número de entradas y las columnas solicitadas.

  • cell_width

    string | number

    Ancho uniforme en píxeles de cada celda de la cuadrícula. Solo se aplica cuando direction es grid.

    Las imágenes se redimensionan para caber dentro de la celda y conservar su relación de aspecto.

  • cell_height

    string | number

    Alto uniforme en píxeles de cada celda de la cuadrícula. Solo se aplica cuando direction es grid.

    Las imágenes se redimensionan para caber dentro de la celda y conservar su relación de aspecto.

  • border

    string | number(valor predeterminado: 0)

    Un valor entero que define el espacio entre las imágenes de la hoja de sprites.

    Un valor de 10 produciría el mayor espacio entre las imágenes, mientras que un valor de 1 colocaría las imágenes una junto a otra.

    Cuando effect es polaroid-stack, este valor se usa en cambio como relleno del lienzo, de modo que las fotos más exteriores mantengan esa cantidad de píxeles de distancia respecto del borde.

    Cuando effect es mosaic, este valor se usa tanto para el relleno exterior del lienzo como para el ancho del espacio entre mosaicos adyacentes.

  • background

    string | transparent | none | black | white | red | green | blue | (valor predeterminado: "#fff")

    El código hexadecimal o el nombre del color usado para rellenar el fondo (solo se muestra con un borde > 1).

    De forma predeterminada, el fondo de las imágenes transparentes cambia a blanco. Establécelo en none o transparent para obtener un lienzo transparente; establece format en png o webp para conservar el canal alfa.

    Para obtener detalles sobre cómo conservar la transparencia en todos los tipos de imagen, consulta esta demo  (English).

  • width

    string | number

    Ancho en píxeles del lienzo de salida.

    Se usa principalmente con efectos estilizados como polaroid-stack y mosaic.

  • height

    string | number

    Alto en píxeles del lienzo de salida.

    Se usa principalmente con efectos estilizados como polaroid-stack y mosaic.

  • seed

    string | number

    Semilla determinista opcional que usan los efectos estilizados como polaroid-stack y mosaic.

  • shuffle

    boolean(valor predeterminado: false)

    Indica si los efectos estilizados como polaroid-stack y mosaic pueden mezclar el orden de las entradas antes de disponerlas en el lienzo.

  • sort_by

    auto | basename | import_order(valor predeterminado: "basename")

    Controla cómo se ordenan las entradas agrupadas cuando no se usa ningún alias numerado explícito para el tipo de entrada. Los alias numerados terminan con un sufijo numérico como _1.

    El valor predeterminado "basename" conserva el comportamiento heredado de ordenamiento natural por nombre base.

    Establécelo en "import_order" para conservar el orden de los Steps de importación basados en arrays cuando todos los archivos de entrada contengan metadatos completos del orden de importación. "auto" tiene la misma preferencia por el orden de importación y usa el ordenamiento natural por nombre base como alternativa.

  • coverage

    string | number

    Multiplicador de cobertura de área para el efecto polaroid-stack. Controla el tamaño de cada foto instantánea en relación con el lienzo y, por consiguiente, qué proporción del lienzo queda cubierta por fotos.

    El valor predeterminado 1.5 deja un sutil borde beige a lo largo de algunos lados. Usa 2.0–2.5 para cubrir el lienzo de lado a lado (las fotos se superponen más). Los valores inferiores a 1.0 producen fotos instantáneas más pequeñas y más separadas entre sí.

    No tiene efecto en el estilo mosaic ni en las hojas de sprites sencillas.

  • adaptive_filtering

    boolean(valor predeterminado: false)

    Controla la compresión de imágenes PNG. Establecerlo en true reduce el tamaño del archivo, pero aumenta el tiempo de procesamiento. Se recomienda mantener esta opción deshabilitada.

  • quality

    string | number(valor predeterminado: 100)

    Controla la compresión de las imágenes JPG, PNG y WebP. Consulta también 🤖/image/optimize.

Demos

Publicaciones relacionadas del blog