How to capture website screens via URL and using Google API (in PH...

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 : <input type="text" name="url" placeholder="site address....." />
</p>
<input type="submit" name="submit" value="CAPTURE SCREEN">
</body>
</html>

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.";
    } 
}
 ?>