How to capture website screens via URL and using Google API (in PHP)

What Will I Learn?

You will learn API PHP
You will learn Google PageSpeed Insights
You will learn Decode JSON

Requirements

you have a basic knowledge of PHP
Text Editor (Exp : Notepad++, SublimeText)
Xampp/Wamp
Access to the Internet

Difficulty

Basic

Description

Usually to take a picture of our screen using the "Print Screen" or "Print Sc" button and there are also other applications. But here I will give a tutorial how to create a PHP program to capture the website screen using "URL".

The function of web page screen capture is used for various purposes in web applications.

Actually there is an awful lot available to take the screen of a website page, but we want to create our own program through PHP API and Google PageSpeed Insights.

Tutorial Contents

Understanding API ?

API (Application Program Interface) is widely used for service liaison between one program with another program (bridge). Here I will not discuss much about API theory, preferably friends looking for better sources for API theory and understanding issues.

Understanding PageSpeed Insights ?

PageSpeed Insights reports on the real-world performance of a page for mobile and desktop devices and provides suggestions on how that page may be improved.

Form HTML

In HTML Form there are two types of forms, namely :

Input form
submit form.

Input form is useful to enter URL website address, While Form submit function to update URL address into picture with PHP.

<!DOCTYPE html>
<html>
<head>
    <title> How to capture website screens via URL and using Google API (in PHP)</title>
</head>
<body>
<form method="post" action="screenshot.php">
<p>
Enter the Site URL : 

CSS


<style type="text/css">
		html{
			background-color: #c0c3c1;
	}
    input[type=text]{

        width:50%;
        padding: 15px 20px; 
        border: none;
        border-radius:2px; 
    }
     input[type=submit]{

        width: 30%;
        padding: 12px 25px;
        margin: 8px 435px;
        box-sizing: border-box;
        font-family: sans-serif;
        background-color: #4CAF50;
        color: white;
        border-radius:2px;

    }
    p{
        text-align: center;
        font-size: 20px;
        font-family: sans-serif;
    }
</style>



Create PHP (process_ss.php)

<?php
if (!empty($_POST['url'])) {
     $siteURL = $_POST['url'];
    
    
if (filter_var($siteURL, FILTER_VALIDATE_URL)) {
        $process = file_get_contents("https://www.googleapis.com/pagespeedonline/v2/runPagespeed?url=$siteURL&screenshot=true");

        
$process = json_decode($process, true);
        $screenshot = $process['screenshot']['data'];
        $screenshot = str_replace(array(
            '_',
            '-'
        ), array(
            '/',
            '+'
        ), $screenshot);
        echo "<img src=\"data:image/jpeg;base64," . $screenshot . "\" />";
    } else {
        echo "Please enter a valid URL.";
    } 
}
 ?>


Explanation of PHP Code

Calling the name "url" html or Website Url

call the Google PageSpeed Insights API


data decode json

It serves to take the website screen


Serves to display the screen that has been captured


DEMO Program

- Save and Run.


Enter the URL of the website we will capture
Here, let me illustrate my steemit address : https://steemit.com/@otakngoding



Captured Image Results




Code Via Drive : Download


Posted on Utopian.io -  Rewarding Open Source Contributors