Take screenshots of webpages or HTML files

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

Usage example

{
  "steps": {
    "captured": {
      "robot": "/html/convert",
      "url": "https://transloadit.com"
    }
  }
}

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 videos, you can also add "interlaced": true to detect whether the video is interlaced. This combines the cheap ffprobe field_order flag with a bounded idet sampling pass over the first frames of the source, exposing interlaced, field_order, and a diagnostic interlace_detection object under file.meta. This is computationally expensive and billed accordingly.

  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.

• user_meta

  Record<string, any>(default: {})

  Adds custom metadata to each file emitted by this Robot without modifying the file’s contents.

  The values are merged with any existing user_meta carried by the input file. If both objects contain the same key, this Robot’s value takes precedence. Assembly Variables are supported, for example { "internal_file_id": "${file.id}" }.

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

• url

  string | null(default: 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

  jpeg | jpg | pdf | png(default: "png")

  The format of the resulting image.

• fullpage

  boolean(default: 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(default: 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

  string | number(default: 1024)

  The screen width that will be used, in pixels. Change this to change the dimensions of the resulting image.

• height

  string | number

  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

  string | number(default: 0)

  The delay (in milliseconds) applied to allow the page and all of its JavaScript to render before taking the screenshot.

• headers

  Record<string, string>

  An object containing optional headers that will be passed along with the original request to the website. For example, this parameter can be used to pass along an authorization token along with the request.

• wait_until

  domcontentloaded | load | networkidle | commit(default: "networkidle")

  The event to wait for before taking the screenshot. Used for loading Javascript, and images.

  See Playwright's documentation⁠ for more information.

Demos

Related blog posts