Screenshot rendering API

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.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.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.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"
        }
    }
}'

Parameters	Available values
type	png, jpeg
quality	1-100, available for jpeg only
position	'top', 'right top', 'right', 'right bottom', 'bottom', 'left bottom', 'left', 'left top',
fit	'cover', 'contain', 'fill', 'inside', 'outside'