Easy instant website screenshots via Transloadit CDN
For our blog today, we'll be taking a quick look at our Transloadit CDN and the /html/convert Robot. We'll use an Assembly Variable expression to decode a URL supplied in the request path, then serve the screenshot through the CDN.
We're going to create a small Template to take a screenshot of a website, which can then be dynamically altered and presented to the user within seconds. Let's get started!
Our Template
{
"steps": {
"screenshot_page": {
"robot": "/html/convert",
"format": "png",
"fullpage": false,
"delay": 100,
"url": "${decodeURIComponent(fields.input)}"
},
"served": {
"use": "screenshot_page",
"robot": "/file/serve"
}
}
}
This is all we need in our Template to be able to preview a website. Our first
Step screenshot_page will take a screenshot of any URL that we provide it.
The decodeURIComponent(fields.input) expression decodes the URL supplied in the request path;
it is an Assembly Variable expression, not a
separate /script/run Robot. In essence, we transform
https%3A%2F%2Ftransloadit.com%2Fpricing%2F into https://transloadit.com/pricing/.
Next up, we use the /file/serve Robot to upload the website preview to our CDN, allowing the result to be accessed from all over the world in the blink of an eye.
Demo
Enter a public HTTP or HTTPS URL and submit the form to request a screenshot. Sites that require authentication or block automated browsers may not produce a usable preview. The results are cached, so if it takes a few seconds to generate a URL on the first attempt, the second attempt can be served from cache. Actual latency depends on the target site, network and cache state.
That's going to be all for our small blog today! I hope you enjoyed a quick look at using the Transloadit CDN. Feel free to play around with the Template and add your own parameters.