How to use asp.net and phantomjs to take a screen shot of a page and return it to the client

Question

I want to be able to read a screen shot of a web site, and am attempting to use phantomjs and ASP.NET.

I have tried using page.render which would save the screen shot to a file. It works as a console application, but not when I call it from an asp.net handler. It is probably due to file permissions, since simple applications (like hello.js) work fine.

That is okay, my preference would be not to write to a file, but to deal with the bytes and return an image directly from the handler.

I am a bit lost as to how to do that. I noticed a method called page.renderBase64, but do not know how to use it.

Currently I am using an IHttpHandler.

There is a similar question here, but that person eventualy dropped phantomjs. I like the look of it and want to continue using it if possible. Running Phantomjs using C# to grab snapshot of webpage

Solution 1

According to your last comment you can do the following in phantom js file:

var base64image = page.renderBase64('PNG');
system.stdout.write(base64image);

in C#:

    var startInfo = new ProcessStartInfo {
    //some other parameters here
    ...
    FileName = pathToExe,
    Arguments = String.Format("{0}",someParameters),
    UseShellExecute = false,
    CreateNoWindow = true,
    RedirectStandardOutput = true,
    RedirectStandardError = true,
    RedirectStandardInput = true,
    WorkingDirectory = pdfToolPath
    };
    var p = new Process();
    p.StartInfo = startInfo;
    p.Start();
    p.WaitForExit(timeToExit);
    //Read the Error:
    string error = p.StandardError.ReadToEnd();
    //Read the Output:
    string output = p.StandardOutput.ReadToEnd();

In your output variable you can read base64 returned from phantomJS and then do what you have planned with it.

Solution 2

Use the wrapper for Phantomjs from here nreco wrapper

You can get js for rastor here : rastorize

And then the following code in C# would do the job.

var phantomJS=new PhantomJS();
phantomJS.Run("rasterize.js", new[] { "http://google.com","ss.pdf" });

Solution 3

This question stemmed from my lack of understanding of what a base64 string actually was.

In the javascript file that phantomjs runs, I can write the base64 image directly to the console like so:

var base64image = page.renderBase64('PNG');
console.log(base64image);

In the c# code that runs phantomjs, I can convert the console output back to bytes and write the image to the response, like so:

var info = new ProcessStartInfo(path, string.Join(" ", args));
info.RedirectStandardInput = true;
info.RedirectStandardOutput = true;
info.UseShellExecute = false;
info.CreateNoWindow = true;

var p = Process.Start(info);
p.Start();

var base64image = p.StandardOutput.ReadToEnd();
var bytes = Convert.FromBase64CharArray(base64image.ToCharArray(), 0, base64image.Length);

p.WaitForExit();

context.Response.OutputStream.Write(bytes, 0, bytes.Length);
context.Response.ContentType = "image/PNG";

This seems to avoid file locking issues I was having.

Solution 4

Using CasperJS coupled with PhantomJS , I've been getting beautiful shots of webpages.

var casper = require('casper').create();

casper.start('http://target.aspx', function() {
    this.capture('snapshot.png');
});

casper.run(function() {

    this.echo('finished');
});

I highly recommend you check out that tool. I'm still not sure how to do the post-backs though..

View more solutions