Using Google To Take Screenshot Of A Webpage

Often, when we want to take a screenshot of a specific url or webpage, we tend to use softwares such as phantom.js, which works great. However, it is rather cpu-consuming, especially if you have a lot of such requests. Here’s a better way to do it – letting Google do the job..

I bet you didn’t know this, but, Google Pagespeed has an API endpoint that allows you to take screenshot, and it will return that screenshot in base64 to you. All of you have to do is to make a HTTP GET request to their API. Take a look at the URL below.

https://www.googleapis.com/pagespeedonline/v2/runPagespeed?screenshot=true&strategy=mobile&url={$url}

Let me run through the parameters with you.

• screenshot: boolean value – true or false. Obviously true to take a screenshot
• strategy: the device you want google to use to take your screenshot. Values are either mobile or desktop
• url: the URL of the webpage you wish to take a screenshot of

There are some limitations though, such as

• The max width of the image generated is 320px
• There is no way to pass authentication credentials to the url, so pages protected by logins wouldn’t show up properly.

Now, you can try testing the API for using, and let Google Pagespeed API take a screenshot of well…  Google itself, and see how it turns out. Open a new browser with the following URL

https://www.googleapis.com/pagespeedonline/v2/runPagespeed?screenshot=true&strategy=mobile&url=https://google.com/

It will return a quite a big json array, but just scroll down all the way and you will see something like this shown

"screenshot": {
 "mime_type": "image/jpeg",
 "data": "_9j_4AAQSkZJRgABAQAAAQABAA(TRUNCATED)9k=",
 "width": 320,
 "height": 568,
 "page_rect": {
  "left": 0,
  "top": 0,
  "width": 412,
  "height": 732
 }
}

Of course, the data value holds the base64 string of the screenshot, and in my above example, the base64 string was truncated. Do note that this base64 is url encoded, so you will have to decode it, before the base64 string can be converted to an image.

Below is an example of how you can call the API, and save the generated base64 string into an image file.

<?php  
$url = "https://niraeth.com/";
$encoded_url = urlencode($url);
// Call the API
$json_response = file_get_contents('https://www.googleapis.com/pagespeedonline/v2/runPagespeed?screenshot=true&strategy=mobile&url=' . $encoded_url);

// Convert the JSON response into an array.
$pagespeed_object = json_decode($json_response, true);

// Grab the Screenshot data
$screenshot = $pagespeed_object['screenshot']['data'];

// Fix url encoded base64. Remember how I said the base64 string needs to be decoded first?
$screenshot = str_replace(array('_','-'), array('/','+'), $screenshot);

// Store generated image as file
file_put_contents('file.jpg', base64_decode($screenshot));
?>

If you wish to output the image instead of saving it as a file, just swap the last line with this

$mime_type = $pagespeed_object['screenshot']['mime_type'];
// Output image to browser
echo "<img src='data:{$mime_type};base64,{$screenshot}' alt='Pagespeed Screenshot'/>";

Here’s what I got when outputting it to my browser.

That’s it. Now you can use Google to help you take your screenshots !