Capture screen of webpage in different formats

• Download CaptureWebPage-noexe.zip - 12.8 KB
• Download CaptureWebPage.zip - 6.7 MB

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