How can I create an image from a region of a screen in Javascript?

Question

I have a web app where a user can assemble a user interface (such as another webpage) out of some set of user interface components and I want to provide the option to create an image snapshot of what the user has created. In this way I want to be able to programmatically select, using JS (for example, using jQuery) a region of the browser's displayable area and create a bitmap from this region.

Thank you!

Answer 1

Maybe this can help you: http://html2canvas.hertzen.com/

Answer 2

Straight JavaScript, unlikely.. But you don't mention your overall "setup", so it's hard to know for sure. Tools that perform aspects of what you are describing..

PhantomJS - headless WebKit with JavaScript API. Native support for DOM handling, CSS selector, JSON, Canvas, and SVG. For testing of web-based applications, site scraping, pages capture, SVG renderer, PDF converter, etc.

Zombie.js - "Insanely fast", headless full-stack testing using Node.js. Zombie.js is a lightweight framework for testing client-side JavaScript code in a simulated environment. No browser required.

webkit2png - is a command line tool that creates png screenshots of webpages.