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

So it works with simple hello.js. Are you sure your js file is setup properly? — Andrey Borisko, Apr 28 '13 at 08:01
@AndreyBorisko, the js seems to work. I am now able to save png files, but I sometimes get some file locking errors (the writing process is not done before the reading process starts). I am keen to figure out hot to pass the information from renderBase64 back to the IHttpHandler, but haven't figured that out yet. — zod, Apr 29 '13 at 08:11
What you can try is to output the results of renderBase64() to StandardOutput and read from there. — Andrey Borisko, Apr 29 '13 at 09:28
Thanks. But how to do that with .net? I guess the solution is to use named pipes, but I have no idea how to use them. Say I have a named pipe called "mytestpipe" how would I write to such a thing from the javascript? The only way I know to transfer information from the javascript to the c# is to use console.log. Is there another way (like fs.write("/dev/stdout", base64image, "w") but for windows/.net)? — zod, Apr 30 '13 at 09:48

score 9 · Accepted Answer · answered Apr 30 '13 at 11:57

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.

Thanks for your help @Andrey. In c# I convert the base64 string into bytes with Convert.FromBase64CharArray. — zod, Apr 30 '13 at 14:00

score 3 · Answer 2 · answered May 12 '15 at 20:15

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" });

score 2 · Answer 3 · answered Apr 30 '13 at 11:47

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.

score 1 · Answer 4 · answered Apr 23 '13 at 21:00

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..

score 0 · Answer 5 · answered Aug 06 '13 at 08:17

0

Set the 'WorkingDirectory' property of ProcessStartInfo object in order to specify the saving location of the file.

answered Aug 06 '13 at 08:17

Akila Adikari

1

This seems to either be a comment on another answer, or an incomplete answer. Care to add more detail, or specify which answer your are commenting on? – Keith Pinson Mar 11 '15 at 14:56

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

5 Answers5