In this post, we gonna write a simple PHP script to grab the given website URL screenshot.
There are many solutions to capture screenshots of Web pages. Using the Google Page Speed API is often better because internally Google uses the Chrome browser to capture exactly the way pages are presented to users.
In this tutorial we gonna use Bootstrap for design. Let’s create an HTML form to collect URLs from the user.
Output:
HTML Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>How to Take Website Screen Shot From URL in PHP</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <meta name="theme-color" content="#7952b3"> </head> <body> <div class="container py-3"> <header> <div class="pricing-header p-3 pb-md-4 mx-auto text-center"> <h1 class="display-4 fw-normal">How to Take Website Screen Shot From URL in PHP</h1> </div> </header> <main> <form > <div class="form-row"> <div class="form-group col-md-8"> <label class="sr-only">Site</label> <input type="text" class="form-control" name="site" placeholder="https://site.com"> </div> <div class="form-group col-md-4"> <button type="submit" class="btn btn-primary mb-2">Website Screen Shot</button> </div> </div> </form> <h2 class="display-6 text-center mb-4">Website Screen Shot</h2> <div class="col"> <?php if(isset($_GET['site'])){ ?> <img class="img-fluid" src="<?=$snap['data']?>" alt="snap"> <?php }else { ?> <h2 class="text-muted text-center mb-4">type a site name</h2> <?php } ?> </div> </main> </div> </body> </html> |
PHP script to generate a screenshot for a given URL
We gonna use google APIs to grab the website screenshot and the code is commented pretty well, just through the comments for better understanding.
Click here for API and create a request form here.
PHP Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php if(isset($_GET['site'])){ $api ="YOUR_API"; $site =$_GET['site']; $adress="https://pagespeedonline.googleapis.com/pagespeedonline/v5/runPagespeed?url=$site&category=CATEGORY_UNSPECIFIED&strategy=DESKTOP&key=$api"; $curl_init = curl_init($adress); curl_setopt($curl_init,CURLOPT_RETURNTRANSFER,true); $response = curl_exec($curl_init); curl_close($curl_init); $googledata = json_decode($response,true); $snapdata = $googledata["lighthouseResult"]["audits"]["full-page-screenshot"]["details"]; $snap =$snapdata["screenshot"]; } ?> |
All codes(sample.php):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<?php if(isset($_GET['site'])){ $api ="YOUR_API"; $site =$_GET['site']; $adress="https://pagespeedonline.googleapis.com/pagespeedonline/v5/runPagespeed?url=$site&category=CATEGORY_UNSPECIFIED&strategy=DESKTOP&key=$api"; $adress="http://localhost/php-ornekleri/_.json"; $curl_init = curl_init($adress); curl_setopt($curl_init,CURLOPT_RETURNTRANSFER,true); $response = curl_exec($curl_init); curl_close($curl_init); $googledata = json_decode($response,true); $snapdata = $googledata["lighthouseResult"]["audits"]["full-page-screenshot"]["details"]; $snap =$snapdata["screenshot"]; } ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>How to Take Website Screen Shot From URL in PHP</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <meta name="theme-color" content="#7952b3"> </head> <body> <div class="container py-3"> <header> <div class="pricing-header p-3 pb-md-4 mx-auto text-center"> <h1 class="display-4 fw-normal">How to Take Website Screen Shot From URL in PHP</h1> </div> </header> <main> <form > <div class="form-row"> <div class="form-group col-md-8"> <label class="sr-only">Site</label> <input type="text" class="form-control" name="site" placeholder="https://site.com"> </div> <div class="form-group col-md-4"> <button type="submit" class="btn btn-primary mb-2">Website Screen Shot</button> </div> </div> </form> <h2 class="display-6 text-center mb-4">Website Screen Shot</h2> <div class="col"> <?php if(isset($_GET['site'])){ ?> <img class="img-fluid" src="<?=$snap['data']?>" alt="snap"> <?php }else { ?> <h2 class="text-muted text-center mb-4">type a site name</h2> <?php } ?> </div> </main> </div> </body> </html> |
output: img src (unknown)
Did you type the name of site into the input box. The input name is site.
Used this function too for a little while. Something I do not really like about it … It takes really a lot of time to capture the screenshot. Of course it depends on the pageload of the website too.
Since a few months I am using PhantomJs and honestly it works faster and the quality of the screenshot is a lot better. No idea if Google has an option to output higher quality photos too.