Skip to main content

/screenshot

An easy way to take screenshot of any site or generate image from custom HTML+CSS for banners/ads in social media/etc.

Taking PNG screenshot from URL: (all options below are also available with url parameter)

curl -X POST \
https://chrome-us.browsercloud.io/screenshot?token=API_TOKEN \
-H 'Cache-Control: no-cache' \
-H 'Content-Type: application/json' \
-d '
{
"url": "https://en.wikipedia.org/",
"options": {
"type": "png",
"fullPage" : true
}
}'

Taking screenshot with "selector" parameter

curl -X POST \
https://chrome-us.browsercloud.io/screenshot?token=API_TOKEN \
-H 'Cache-Control: no-cache' \
-H 'Content-Type: application/json' \
-d '
{
"url": "https://en.wikipedia.org/",
"options" : {
"type" : "png"
},
"selector" : "#p-logo"
}'

Generating image/banner/ad from custom HTML+CSS with options

curl -X POST \
https://chrome-us.browsercloud.io/screenshot?token=API_TOKEN \
-H 'Cache-Control: no-cache' \
-H 'Content-Type: application/json' \
-d '
{
"html": "<div class=\"banner\"> <div class=\"border\"> </div> <h2>The Darjeeling Limited</h2> <p>by Wes Anderson</span></p> <div class=\"border border-bottom\"> </div> </div> <style> body { margin: 0; color: #fff; font-family: \"Open Sans\"; background-color: #fff;}.banner { display: flex; padding: 6em 0 8em 0; text-align: center; width: 100%; height: 100%; background-image: url(http://illusion.scene360.com/wp-content/uploads/2015/01/wes-anderson-12.jpg); background-repeat: no-repeat; background-size: cover; box-shadow: inset 0 0 0 2000px rgb(0 0 0 / 50%); justify-content: flex-start; align-items: center; flex-direction: column;}.border { width: 60%; margin: 0 auto; height: 47px; border: 2px solid #fff; border-bottom: 0;}.banner h2 { margin: 0; font-size: 3em; color: #FFFFFF; text-align: center; font-weight: 300; text-transform: uppercase; letter-spacing: 0.5em; padding: 0.5em 0 0 0;}.banner p { color: #FFFFFF; font-size: 1em; font-weight: bold; margin: 1em 0 0 0; line-height: 2em; letter-spacing: 2px; padding: 0 0 2em 0;}.border-bottom { border-top: 0; border-bottom: 2px solid #fff !important;} </style>",
"options": {
"clip" : {
"height" : 500,
"width": 500,
"x" : 10,
"y" : 10
},
"omitBackground" : true,
"quality" : 95,
"type" : "jpeg"
},
"manipulate" : {
"flip" : true,
"flop" : true,
"rotate" : 45,
"resize" : {
"width" : 300,
"height" : 300,
"fit" : "fill",
"position" : "left top"
}
}
}'
ParametersAvailable values
typepng, jpeg
quality1-100, available for jpeg only
position'top', 'right top', 'right', 'right bottom', 'bottom', 'left bottom', 'left', 'left top',
fit'cover', 'contain', 'fill', 'inside', 'outside'