Search code examples
asp.netgoogle-mapsclient-sideprinting-web-page

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

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
Solution

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