views:

108

answers:

2

Hey,

I want my users to be able to take a screenshot of the webpage (or me defining the size of the screenshot) and then allowing them to save it to their computer.

Does anyone know of a good JS lib that allows you to do this?

I know there are addons for the browser, but i wanted something pure JS so that the user can just click in a button and a "save as" link apears with a screenshot of what they are looking at.

Thanks for the help.

/fmsf

+4  A: 

Browsers don't expose APIs that allow this to web pages, so there is no way to achieve this using plain JavaScript running in a page.

The only way to achieve this would be to have screen grabs prepared on the server, and a normal download link pointing to the appropriate one.

David Dorward
yeah we're already doing that, but it brings a great overload to our server, has making the screenshot means to render the page and load the object system. That's why i wanted to avoid it and make it happen on the client side
fmsf
+3  A: 

This can't be done in JavaScript. Taking screen shots outside the current document/domain is a potential security problem and is not possible. See my question about getting the pixel colour from the current mouse position for more background.

If you need to transmit the screen shots onto your server, look into external applications that interact with your web site. Open-source bug tracker Mantis for example has a screenshot application for Windows.

If the screenshot and the saving of the file are both to take place on the client computer, check out Fireshot for Firefox. It doesn't seem to offer any interaction capabilities with a pre-defined web site but may be the right tool for your users.

Pekka
+1. Mozilla have extended canvas with [`.drawWindow()`](https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#section_9), but it's only available to code running with full privileges for the security reasons you mentioned in your post. The [source code](http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352) hints that these security issues may be worked around in the future, however.
Andy E
Cheers @Andy, great info!
Pekka