May 9, 2015 11:21 am

How to capture Website screenshot using PHP & PhantomJS

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

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)

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.

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)

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.

And here is our front-end:

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.

References

http://superuser.com/questions/502358/easier-way-to-change-environment-variables-in-windows-8

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories:
  • Shyam

    Demo link is incorrect. Can we take a Full Page screenshot using this method?