The /html/convert Robot

We can process your documents in an automated way, saving you costly resources.

The /html/convert Robot takes screenshots of web pages or uploaded HTML pages.

Parameters

Name Type Default Description
use (required) String / Array of Strings / Object

General

Specifies which Step(s) to use as our input.

Special Step names

A special Step name is ":original", which provides user uploads handled by Transloadit. Outside of this restriction you can pick your own names.

Providing several Steps as input

You can add arrays to use several Steps:
"use": [
  ":original",
  "encoded",
  "resized"
]
:bulb: That's likely all you need to know about use, but you can view advanced use cases:
› Advanced use cases

Step bundling

Some Robots can gather several Step results for a single invocation. For example, the /file/compress Robot would normally create one archive for each file passed to it. If you'd set bundle_steps to true, however, it will create one archive containing all the result files from all Steps you give it. To enable bundling, provide an object like the one below to the use parameter:
"use": {
  "steps": [
    ":original",
    "encoded",
    "resized"
  ],
  "bundle_steps": true
}
This is also a crucial parameter for the /video/adaptive Robot, otherwise you'll generate 1 playlist for each viewing quality.
Keep in mind that all input Steps must be present in your Template. If one of them is missing (for instance it is rejected by a filter), no result is generated because the Robot waits indefinitely for all input Steps to be finished. Here's a demo that showcases Step bundling.

Group by original

Sticking with the /file/compress Robot example, you can set group_by_original to true, in order to create a separate archive for each of your uploaded or imported files, instead of creating one archive containing all originals (or one per resulting file). This is important for for the /media/playlist Robot where you'd typically set:
"use": {
  "steps": [
    "segmented"
  ],
  "bundle_steps": true,
  "group_by_original": true
}

Fields

You can be more discriminatory by only using files that match a field name by setting the fields property. When this array is specified, the corresponding Step will only be executed for files submitted through one of the given field names, which correspond with the strings in the name attribute of the HTML file input field tag for instance. When using a back-end SDK, it corresponds with myFieldName1 in e.g.: $transloadit->addFile('myFieldName1', './chameleon.jpg'). This parameter is set to true by default, meaning all fields are accepted. Example:
"use": {
  "steps": [ ":original" ],
  "fields": [ "myFieldName1" ]
}

Use As

Sometimes Robots take several inputs. For instance, the /video/merge Robot can create a slideshow from audio and images. You can map different Steps to the appropriate inputs. Example:
"use": {
  "steps": [
    { "name": "audio_encoded", "as": "audio" },
    { "name": "images_resized", "as": "image" }
  ]
}
Sometimes the ordering is important, for instance, with our concat Robots. In these cases, you can add an index that starts at 1. You can also optionally filter by the multipart field name. Like in this example, where all files are coming from the same source (end-user uploads), but with different <input> names: Example:
"use": {
  "steps": [
    { "name": ":original", "fields": "myFirstVideo", "as": "video_1" },
    { "name": ":original", "fields": "mySecondVideo", "as": "video_2" },
    { "name": ":original", "fields": "myThirdVideo", "as": "video_3" }
  ]
}
For times when it is not apparent where we should put the file, you can use Assembly Variables to be specific. For instance, you may want to pass a text file to the /image/resize Robot to burn the text in an image, but you are burning multiple texts, so where do we put the text file? We use specify it via ${use.text_1}, to indicate the first text file that was passed. Example:
"watermarked": {
  "robot": "/image/resize",
  "use"  : {
    "steps": [
      { "name": "resized", as: "base" },
      { "name": "transcribed", as: "text" },
    ],
  },
  "text": [
    {
      "text"  : "Hi there",
      "valign": "top",
      "align" : "left",
    },
    {
      "text"    : "From the 'transcribed' Step: ${use.text_1}",
      "valign"  : "bottom",
      "align"   : "right",
      "x_offset": 16,
      "y_offset": -10,
    }
  ]
}
url String / Null null The URL of the web page to be converted. Optional, as you can also upload/import HTML files and pass it to this Robot
format String "png" The format of the resulting image. The supported values are "jpg","jpeg", "png" and "pdf".
fullpage Boolean true Determines if a screenshot of the full page should be taken or not. If set to true, the height parameter will not have any effect, as heights of websites vary. You can control the size of the resulting image somewhat, though, by setting the width parameter. If set to false, an image will be cropped from the top of the webpage according to your width and height parameters.
omit_background Boolean false Determines whether to preserve a transparent background in HTML pages. Useful if you're generating artwork in HTML that you want to overlay on e.g. a video. The default of false fills transparent areas with a white background, for easier reading/printing. This parameter is only used when format is not pdf.
width Integer 1024 The screen width that will be used, in pixels. Change this to change the dimensions of the resulting image.
height Integer 768 The screen height that will be used, in pixels. By default this equals the length of the web page in pixels if fullpage is set to true. If fullpage is set to false, the height parameter takes effect and defaults to the value 768.
delay Integer 0 The delay (in milliseconds) applied to allow the page and all of its JavaScript to render before taking the screenshot.

Demos

Our /html/convert Robot can be used in combination with other Robots, to create powerful workflows unique to your use case. Here are a few example scenarios that you can try live on our website:

Pricing

Transloadit is a SaaS with a subscription model.

Our /html/convert Robot counts towards your plan's data at a normal rate. It charges at minimum 1MB whenever it is used. Assuming the Startup Plan and an average document size of 0.8MB, you could take 8192 documents for $49/month.

Just like with your mobile plan, pricing goes down considerably when you commit to larger monthly volumes. You can adjust this every month. More info and available plans on our Pricing page.

Blog posts about the /html/convert Robot

We wrote the following posts about the /html/convert Robot on our blog: