Capture screenshot of website on the client (Javascript or flash)

Question

Hi everyone,

Is there some method to issue a screen capture(browser window content only) from the browser with javascript or a embedded flash object etc so that a full quality image of the page content be saved or printed or an alternative approach.

I have a web app (asp.net 3.5) with google maps and other ajax operations client side like a custom tile server. I have been trying to implement a way for the user to print good quality captures of the webpage.

I have used the basic Window.Print() but in both IE and FF there many artifacts within the google maps and some items such as the popped up bubble doesnt print. I have experimented with save pdf thru cutepdf(just to post an example here) and the quality thru window.print() is low too.

For example, A screenshot with FireShot addon is perfect and what I want the client to have. however that is FF only and I cant ask the clients to install addons/activex controls on their browsers.

Have a look at this download example zip file(4mb) with:

1. Example screen shot using FireShot (example of what I want to achieve thru a html/JS button with in the page)
2. Firefox Window.Print() result (cutepdf used to save as pdf)
3. IE Window.Print() result (cutepdf used to save as pdf)

note in 2,3 the little bubble is not printed even when open.

For now, I have added the function on my site to go fullscreen and guide the user to take a screenshot or call the window.print() function.

I am still looking for a method to print/capture my page.

are there any flash/activex controls that I can include in my page and thru them provide a quality print mechanism?

Thanks again for all the help but I still need more. :)

Thank you in advance.

http://rapidshare.com/files/311849636/Print_examples.zip.html

Answer 1

I don't think this is possible. It would be quite a security risk to be able to capture the user's screen through scripting (imagine bad sites capturing screen information).

Answer 2

The only way to reliably provide a high-quality print version of whats on-screen in a rich web application is to use the client-side, say JavaScript, to send the server precise information about the current state (where bubbles are, etc.) and use that to generate an image that mimics the positioning. Convert that image to a PDF or what-have-you, then send to the client for download.

Answer 3

You'll go to all that work only to find that a simple app like Snagit will do the job. Building a SnagIt Screen Capture Plugin

Answer 4

For now, I have added the function on my site to go fullscreen and guide the user to take a screenshot or call the window.print() function.

I am still looking for a method to print/capture my page.

are there any flash/activex controls that I can include in my page and thru them provide a quality print mechanism?

Thanks again for all the help but I still need more. :)

Answer 5

Google also has a Static Maps API that might give you good results. I looked into it myself once, and only didn't go with it since (at the time) there were limitations on how many points they could support in a polyline.

Answer 6

I found mentions of some javascript once that could be used to read images pixel by pixel and possibly send it back to the server which in turn can send back a proper image to save/print.

Any ideas about this?

Answer 7

No there is not, though it would come in quite handy at times for bug reporting etcetera.

You will probably get the best result by creating a separate version of the page as a PDF have that being generated. It's no quick fix by all means, but you'll get superb print quality and total control over everything. The map part will probably be a bit tricky though as you need to get the map as a bitmap on the server somehow, and if it's not in flash on the client I don't know how you'd do that.