Capture Screenshot of Website from URL using PHP

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>
 

Search This Blog

Shayriies

Capture Screenshot of Website from URL using PHP

PHP script to generate a screenshot for a given URL

Comments

Post a Comment