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 : <input type="text" name="url" placeholder="site address....." />
</p>
<input type="submit" name="submit" value="CAPTURE SCREEN">
</body>
</html>
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
Your contribution cannot be approved because it does not follow the Utopian Rules, and is considered as plagiarism. Plagiarism is not allowed on Utopian, and posts that engage in plagiarism will be flagged and hidden forever.
As you have plagiarised before, as seen here and here, I don't believe it's a coincidence your code is nearly identical to here (or one of the many other tutorials showing how to do this).
You can contact us on Discord.
[utopian-moderator]