How to capture Website screenshot using PHP & PhantomJS

May 9, 2015 11:21 am

How to capture Website screenshot using PHP & PhantomJS

{ 1 Comment }

We have wrote an article on screen capture using a library which is paid with free version it makes screenshots with for 3 days only. So today I am going to write this tutorial to move a free library PhantomJS using PHP and PhantomJS you can easily capture website screenshots for free so let’s start with installation.

How to capture Website screenshot using PHP & PhantomJS

[wpdm_file id=136]DEMO

Installation

First, you would need to setup PhantomJS in your PATH variable so you can easily access it from the Command line. We have provided you with a copy of the binary file that makes PhantomJS tick in the downloads.

If you are using Windows 7, you can do that from Right clicking My Computer -> Properties -> Advanced system settings -> Environment Variables ->,selecting path and clicking on edit you would need to add the path to the folder with the PhantomJS binary file, something like that: E:\apps\phantomjs\phantomjs-2.0.0-windows\phantomjs-2.0.0-windows\bin;

If you are using Windows 8, you could go to: *Start -> All Apps -> Control panel -> System ->
Advanced System Settings -> Advanced -> Environment variables.*
and set it up from there.

If you are using another OS, please search how to set up the PATH environment variable for your OS and add the folder with the binary file (phantomjs.exe) to it.

Coding the PhantomJS Service

Firstly, we require the system module as we want to be able to receive arguments to our service. Afterwards, we check if there are arguments present and create the screenshot only if there are arguments (we need only one for this app)

var system = require("system");
if (system.args.length > 0) {

Then, we require the webpage module and create a screenshot of the first argument (we are expecting it to be the URL to the page).

pageTitle is just the name of the site without www, http:// and without any resources within the site that were requested. filePath is where we are going to store the image in.

var page = require('webpage').create();
    page.open(system.args[1], function() {
        var pageTitle = system.args[1].replace(/http.*\/\//g, "").replace("www.", "").split("/")[0]
        var filePath = "img/" + pageTitle + '.png';

Finally, we save the screenshot in the file and display the path to the file in our console (which would be the command line, sort of)

page.render(filePath);
        console.log(filePath);
        phantom.exit();

Coding the front and back-end of the service

In our back-end, we check if the request is of type POST and check if an url is passed to the page. If so, we validate whether the input is an actual URL and if it is we use exec() to execute the command line `phantomjs site-screenshot.js filePath* variable and deduce the original site name from it.

<?php
define("IMAGE_PATH", "img/");
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['url'])) {
    $url = filter_var($_POST['url'], FILTER_VALIDATE_URL);
    if ($url) {
        $filePath = exec('phantomjs site-screenshot.js ' . $url);
        $siteName = str_replace(".png", "", str_replace(IMAGE_PATH, "", $filePath));

    }
}



?>

And here is our front-end:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Website Screenshot Service</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="jumbotron col-md-10 col-md-offset-1">
            <h1 class="text-center">Ivan's Awesome Screenshot Service</h1>
        </div>
        <div class="col-md-10 col-md-offset-1">
            <form action="" method="POST" class="form-inline">
                <label for="url">Enter the site's name and get your screenshot</label>
                <input class="form-control" type="url" name="url" id="url"/>
                <input type="submit" class="btn btn-lg btn-primary" value="Get Screenshot"/>
            </form>

        </div>
        <?php if (isset($filePath)) : ?>
        <div class="col-md-10 col-md-offset-1">
        <h2 class="alert alert-success text-center">Your screenshot for <?php echo $siteName; ?></h2>
        <a href="<?php echo $filePath; ?>" download="<?php echo $siteName;?>.png">
            <img src="<?php echo $filePath; ?>"  alt="generated image">
        </a>
        <p class="lead"><span class="glyphicon glyphicon-info"></span>Click on the image to download it.</p>
        </div>

        <?php endif; ?>
    </div>
</div>

</body>
</html>

The only thing of notice is that we display the screenshot if the $filePath variable is present which would be present if we have launched the PhantomJS service and display the image if so. We also force the user to download the image when they click on it with the HTML’s attribute download with the name of the image being the site’s name (along with any subdomains).

Conclusion

Now we have created a simple website screenshot capturing service which you can further enhance by adding additional functionalities and features.

Happy screenshoting and if you have found this article useful, please feel free to leave a comment.