Click here to Skip to main content
Click here to Skip to main content
Go to top

Capture screen of webpage in different formats

, 26 May 2013
Rate this:
Please Sign up or sign in to vote.
Capturing web screen in different formats without any browser(PhantomJS)

Introduction  

Sometime it is required to capture the screen shot of a web page. There have lots of browser extensions, plug-ins etc to do it. But all these cases you are required to use the web browser, Furthermore there have limitation in output types. PhantomJS provides you the ability to do it. This tutorial shows how you can capture web page as per your desired output types by using PhantomJS .

Background  

Very often it is required to take screen shot of a web page. Specially when we deal with client to demonstrate the samples or we are required to write document with sample screens. If you are Windows user then probably you use MS Paint to do it. Otherwise there have lost of tools and browser's extensions/plug-ins etc. But what if you want to develop the tool by yourself or yo want web page's full screen shot without involving the installed browsers? Or you want to save the screen in different formats at a time? Then PhantomJS provides you these facilities.

In this article you will see how you can use PhantomJS to build such a tool. If you want to read more about the PhantomJS please visit their site.

Note: In case you download the src without phantomjs.exe then you need to download the exe/API from PhantomJS's web site. After downloading and extracting the zip, please copy the "phantomjs.exe" to the "Resources" directory of the downloaded solution.

Using the code 

Basically phantomjs.exe is executed with a set of instructions or scripts that are recognized by it.  Usages of phantomjs.exe are huge and it is out of scope of this article. This getting started guide will show you some of the features. Here I will show you how a basic script can be used to capture our desired web page in one or more or all of "gif", "png", jpeg", "pdf" formats. 

The script for phantomjs is saved with .js extension and here is the very simple script that is used by me.

//
var page = require('webpage').create();
page.open('your_ur', function () {
    
page.render('your_path_to_save_the_screen'); //e.g: c:/myweb.pdf
phantom.exit();
});
// 

In the above script if we write multiple page.render('..) statement then the web screen will be saved in multiple files. The format of the file will be determined by the extension of the file/path used in 'your_path_to_save_the_screen'.

So to make the script dynamic I've used following template (which you can find in /Resources/render_template.js):

//
 var page = require('webpage').create();

page.open('[UserURL]', function () {

    [RENDER_CODE]

    phantom.exit();

});
// 

Now when user runs the application and set his desired url, path, file name and types then dynamically the [UserURL] is replaced with the url, and the [RENDER_CODE] is replaced by one or more page.render(...) statement as per user's file path and extension. The template file remains intact and the script is written to new file called "render.js". Here is the C# code to do it(for simplicity I'm not discussing the events and other logic): 

string render_string = "page.render('fileName');";
string render_code = "";

if (cbJpeg.Checked)
{
    render_code += Environment.NewLine + render_string.Replace("fileName", 
      Path.Combine(path, txtName.Text + "." + "jpeg").Replace("\\", "/"));
}
if (cbGif.Checked)
{
    render_code += Environment.NewLine + render_string.Replace("fileName", 
      Path.Combine(path + txtName.Text + "." + "gif").Replace("\\", "/"));
}
if (cbPng.Checked)
{
    render_code += Environment.NewLine + render_string.Replace("fileName", 
      Path.Combine(path + txtName.Text + "." + "png").Replace("\\", "/"));
}
if (cbPdf.Checked)
{
    render_code += Environment.NewLine + render_string.Replace("fileName", 
      Path.Combine(path + txtName.Text + "." + "pdf").Replace("\\", "/"));
}

StreamReader reader = new StreamReader("render_template.js");
string source_content = reader.ReadToEnd();
source_content = source_content.Replace(
  "[UserURL]", url).Replace("[RENDER_CODE]", render_code);
reader.Close();

StreamWriter writer = new StreamWriter("render.js");
writer.Write(source_content);
writer.Close();

Finally we need to invoke the "phantomjs.exe" with our desired script file. Here is the C# code:

var process = new System.Diagnostics.Process();
process.StartInfo = new System.Diagnostics.ProcessStartInfo { 
  FileName = "phantomjs.exe", Arguments = "render.js"};
process.Start();
process.WaitForExit();

I  hope you will like it and now you can build web screen capturing tool by your own Smile

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

maftahur
Chief Technology Officer coderoller
Bangladesh Bangladesh
I’m Maftahur Rahman who is a very simple and ordinary man. I’m Bangladeshi and like to live here in simplicity. The city Rajshahi is my sweet home town. By religion I’m a muslim practitioner and by profession I’m a software engineer.
 
In my profession, I’ve have been here since 2006. Working and learning new technologies is my passion. Writing and reading technical blogs is my hobby. In my career I’ve been touched with .NET/WPF/ASP.NET/DevExpress, PHP/Wordpress/PhpBB/Lithium, MVC/MVVM, Javascript/jQuery/ExtJS/Infragistics Ignite UI, CSS2/CSS3/HTML4/HTML5, MS SQL Server, MySQL, pgSQL, SQLite, MS Access, Facebook/Twitter/XERO/SocialText/CrossKnowledge APIs etc technologies.
 
Currently I’m holding the position of CTO @coderoller and also doing freelance software development. Earlier I was in Enosis Solutions as Senior SQA Engineer.
 
I’ve taken bachelor degree in Computer Science & Engineering from the Rajshahi University of Engineering & Technology, Bangladesh.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140926.1 | Last Updated 26 May 2013
Article Copyright 2013 by maftahur
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid