Export a jQuery div as a picture

Question

I found a very nice jQuery polaroid running in a div.

Is it possible to save the result in a single image? What library should I use? I am using Java, JavaScript and Python. Is there a library for those languages?

Answer 1

It's not quite clear how you want to use this. A couple of use cases come to mind:

1. Occasionally, in your own browser. Use Windows screen capture (Alt-printscreen), paste into a graphics editor (Paint.NET), and crop.

2. Often, in your own browser. Install a browser plugin like IECapt http://iecapt.sourceforge.net/ or FireShot https://addons.mozilla.org/en-US/firefox/addon/5648/

3. Programmatically, in your own browser. Use win32 api calls to get a screenshot, crop and save. ?Linux equivalent?

4. For a developer, to get testing screenshots on their own machine or a test machine. Selenium RC http://saucelabs.com/blog/index.php/2009/10/selenium-tip-of-the-week-screenshot/

5. For a user, in their own browser:

   • Instrument the javascript to report thumbnail positions back to the server; write server-side code to recreate the image, give the user a 'save image as' button to download it.

   • use an ActiveX control (Snapsie https://github.com/nirvdrum/SnapsIE ) (WebThumb http://www.acasystems.com/en/web-thumb-activex/ ) - need permission to run, IE only

   • use a Java applet (SnapABug http://www.barklund.org/blog/2009/10/14/how-snapabug-works/ ) - need permission to run

   • use nonstandard, unsecure javascript extensions? https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#section_9 - looks like maybe you can grab part of the webpage and roll it over to a canvas? Then http://www.nihilogic.dk/labs/canvas2image/ to save it as a file.

Some related questions:

• Take a screenshot of a webpage with JavaScript?
• save an image with selenium & firefox
• Programmatically get a screenshot of a page
• JavaScript code to take a screenshot of a website without using ActiveX