Our /image/merge Robot

Merge several images into a single image

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

The final result will be a spritesheet, with the images displayed horizontally or vertically.

It's recommended to use this Robot with 🤖/image/resize so your images are of a similar size before merging them.

Usage example

Merge uploaded images into one, with a 5px gap between them on the spritesheet:

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

Parameters

  • use

    String / Array of Strings / Object required

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

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

  • output_meta

    Object / Boolean ⋅ default: {}

    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.

  • format

    String ⋅ default: "png"

    The output format for the modified image.

    The currently available formats are either "jpg" or "png".

  • direction

    String ⋅ default: horizontal

    Specifies the direction which the images are displayed. Valid directions include "vertical" and "horizontal".

  • border

    Integer(1-10) ⋅ 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

    Integer(1-100) ⋅ default: 92

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

    Before:
    Original image

    Quality 92 applied:
    Image with quality 92

    Quality 40 applied:
    Image with quality 40

    If this parameter is not specified, it will default to the quality of the input image. If we're unable to determine the quality, it will default to 92.

Demos

Related blog posts