Merge several images into one image

🤖/image/merge merges several images into a single spritesheet.

Usage example

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

Parameters

• interpolate

  boolean | Record<string, boolean>

  Controls whether Assembly Variables are interpolated for individual instruction fields.

  By default, most Robot instruction fields interpolate Assembly Variables. Set this to false to treat every instruction field as literal text, or set an individual field path to false to treat only that field as literal text. For Robot-specific fields that are literal by default, set this to true or set that field path to true to opt back into interpolation.

  Use field names such as path, or dotted paths such as ffmpeg.vf for nested objects.

• 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 images, you can also add "blurhash": true to extract a BlurHash string — a compact representation of a placeholder for the image, useful for showing a blurred preview while the full image loads.

  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.

• ignore_errors

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

  Ignore errors during specific phases of processing.

  Setting this to ["meta"] will cause the Robot to ignore errors during metadata extraction.

  Setting this to ["execute"] will cause the Robot to ignore errors during the main execution phase.

  Setting this to true is equivalent to ["meta", "execute"] and will ignore errors in both phases.

• 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"
      ]
    }
    

  • You can also tag an input Step with as to pass semantic intent to robots:
  • You can also tag input Steps with as to pass semantic intent to robots:
    

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

  Tip

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

• format

  jpg | png | webp (default: "png")

  The output format for the modified image.

• direction

  horizontal | vertical (default: "horizontal")

  Specifies the direction which the images are displayed.

  Only applies to the default spritesheet layout. Ignored when effect is set to polaroid-stack or mosaic, as those effects use their own layout algorithms.

• effect

  mosaic | polaroid-stack

  Applies a styled collage layout instead of a plain horizontal or vertical spritesheet.

  Currently supports polaroid-stack, which renders the inputs as overlapping instant photos on a canvas, and mosaic, which builds a justified tiled collage.

• 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.

  When effect is polaroid-stack, this value is instead used as canvas padding so the outermost photos keep that many pixels of distance from the edge.

  When effect is mosaic, this value is used both as the outer canvas padding and as the gutter width between neighbouring tiles.

• background

  string | transparent | none | black | white | red | green | blue | 6 more ↓ (default: "#fff")

  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. Set to none or transparent for a transparent canvas — requires format png or webp to preserve alpha.

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

• width

  string | number

  The output canvas width in pixels.

  This is mainly used by styled effects such as polaroid-stack and mosaic.

• height

  string | number

  The output canvas height in pixels.

  This is mainly used by styled effects such as polaroid-stack and mosaic.

• seed

  string | number

  Optional deterministic seed used by styled effects such as polaroid-stack and mosaic.

• shuffle

  boolean (default: false)

  Whether styled effects such as polaroid-stack and mosaic may shuffle the input order before laying out the canvas.

• coverage

  string | number

  Area-coverage multiplier for the polaroid-stack effect. Controls how large each polaroid is relative to the canvas and consequently how much of the canvas is covered by photos.

  The default of 1.5 leaves a subtle beige border along some edges. Use 2.0–2.5 for edge-to-edge coverage (photos overlap more). Values below 1.0 produce smaller, more widely spaced polaroids.

  Has no effect on the mosaic style or on plain spritesheets.

• 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: 100)

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

Demos

Related blog posts