Merge several images into one image

Usage example

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

Parameters

• output_meta

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

  Allows you to specify a set of metadata that is more expensive on CPU power to calculate, and thus is disabled by default to keep your Assemblies processing fast.

  For images, you can add "has_transparency": true in this object to extract if the image contains transparent parts and "dominant_colors": true to extract an array of hexadecimal color codes from the image.

  For videos, you can add the "colorspace: true" parameter to extract the colorspace of the output video.

  For audio, you can add "mean_volume": true to get a single value representing the mean average volume of the audio file.

  You can also set this to false to skip metadata extraction and speed up transcoding.

• result

  boolean (default: false)

  Whether the results of this Step should be present in the Assembly Status JSON

• queue

  batch

  Setting the queue to 'batch', manually downgrades the priority of jobs for this step to avoid consuming Priority job slots for jobs that don't need zero queue waiting times

• force_accept

  boolean (default: false)

  Force a Robot to accept a file type it would have ignored.

  By default, Robots ignore files they are not familiar with. 🤖/video/encode, for example, will happily ignore input images.

  With the force_accept parameter set to true, you can force Robots to accept all files thrown at them. This will typically lead to errors and should only be used for debugging or combatting edge cases.

• use

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

  Specifies which Step(s) to use as input.

  • You can pick any names for Steps except ":original" (reserved for user uploads handled by Transloadit)
  • You can provide several Steps as input with arrays:
    

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

  Tip

  That's likely all you need to know about use, but you can view Advanced use cases.

• format

  jpg | png (default: "png")

  The output format for the modified image.

• direction

  horizontal | vertical (default: "horizontal")

  Specifies the direction which the images are displayed.

• border

  string | number (default: 0)

  An integer value which defines the gap between images on the spritesheet.

  A value of 10 would cause the images to have the largest gap between them, while a value of 1 would place the images side-by-side.

• background

  string (default: "#FFFFFF")

  Either the hexadecimal code or name of the color used to fill the background (only shown with a border > 1).

  By default, the background of transparent images is changed to white.

  For details about how to preserve transparency across all image types, see this demo.

• adaptive_filtering

  boolean (default: false)

  Controls the image compression for PNG images. Setting to true results in smaller file size, while increasing processing time. It is encouraged to keep this option disabled.

• quality

  string | number (default: 92)

  Controls the image compression for JPG and PNG images. Please also take a look at 🤖/image/optimize.

Demos

Related blog posts