Whats html2canvas plugin?
Simply html2canvas is a plugin that lets developer to take screen shots using only client side rendering by only bothering with JavaScript code.
Concept behind the process.
JavaScript can read the DOM and render a fairly accurate representation of that using canvas. I have been working on a script which converts html into an canvas image. Decided today to make an implementation of it into sending feedbacks like you described.
The script allows you to create feedback forms which include a Screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
It does not require any rendering from the server, as the whole image is created on the clients browser. The HTML2Canvas script itself is still in a very experimental state, as it does not parse nearly as much of the CSS3 attributes I would want it to, nor does it have any support to load CORS images even if a proxy was available.
If you like it Just give it a try!
jsFeedback
jsFeedback is a implementation of html2canvas plugin to create a feedback mechanism for Web apps.
This is pretty much similar to the process behind Google feedback mechanism and how they are doing it!
This script allows you to create feedback forms which include a screenshot, created on the clients browser, along with the form. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page as mentioned above.
Example of Feedback form using jsFeedback plugin
(click the "Send Feedback" button situated at the bottom right corner of the web window.)
Browser compatibility
The script should work fine on the following browsers:
Firefox 3.5+
Newer versions of Google Chrome & Opera
As <IE9 does not support canvas, Flashcanvas or something similar would have to be used alongside this to make it compatible
Related Links and References:
jsFeedback plugin : http://hertzen.com/experiments/jsfeedback/
html2canvas plugin : http://html2canvas.hertzen.com/
jsFeedback plugin : Google Feedback Project Dev lead's facts > https://twitter.com/#!/ElliottZ/status/89520809147772929
Stack Overflow related posts > http://hertzenstackoverflow.com/experimentsquestions/jsfeedback/4912092/using-html5-canvas-javascript-to-take-screenshots