
Take screenshots of webpages or uploaded HTML files
🤖/html/convert takes screenshots of web pages or uploaded HTML pages.
A URL can be provided instead of an input HTML file, to capture a screenshot from the website referenced by the URL.
Use 🤖/image/resize to resize or crop the screenshot as needed.
Warning: A validation error will occur if neither an HTML file is uploaded nor a URL parameter is given.
Note: Any imported files inside of the html page will be included within the cost. [{.alert .alert-warning}]
Parameters
-
use
String / Array of Strings / ObjectrequiredSpecifies 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:› Advanced use cases
-
Step bundling. Some Robots can gather several Step results for a single invocation. For example, 🤖/file/compress 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 theuse
parameter:"use": { "steps": [ ":original", "encoded", "resized" ], "bundle_steps": true }
This is also a crucial parameter for 🤖/video/adaptive, 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 🤖/file/compress example, you can set
group_by_original
totrue
, 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 🤖/media/playlist 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 thename
attribute of the HTML file input field tag for instance. When using a back-end SDK, it corresponds withmyFieldName1
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, 🤖/video/merge 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 🤖/image/resize to burn the text in an image, but you are burning multiple texts, so where do we put the text file? We 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 ⋅ 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
String ⋅ default:"png"
The format of the resulting image. The supported values are
"pdf"
,"jpg"
,"jpeg"
and"png"
. -
fullpage
Boolean ⋅ default:true
Determines if a screenshot of the full page should be taken or not.
If set to
true
, theheight
parameter will not have any effect, as heights of websites vary. You can control the size of the resulting image somewhat, though, by setting thewidth
parameter.If set to
false
, an image will be cropped from the top of the webpage according to yourwidth
andheight
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 notpdf
. -
width
Integer ⋅ default:1024
The screen width that will be used, in pixels. Change this to change the dimensions of the resulting image.
-
height
Integer ⋅ default: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 totrue
. Iffullpage
is set tofalse
, the height parameter takes effect and defaults to the value768
. -
delay
Integer ⋅ default:0
The delay (in milliseconds) applied to allow the page and all of its JavaScript to render before taking the screenshot.
Demos
Related blog posts
- Two New Robots and More Features March 30, 2012
- New Parameters for the /html/convert Robot April 29, 2013
- Upgrade All The Things! June 12, 2013
- Better PNG Optimization July 29, 2014
- Raising prices (for new customers) February 7, 2018
- Re-loadit: the /dropbox/store Robot December 12, 2018
- Opening in a third datacenter, and other upcoming network changes December 20, 2018
- Let's Build: a video from album art October 10, 2021
- Screenshot any website in seconds May 11, 2022