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:

Quality 92 applied:

Quality 40 applied:

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.