StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>JavaScript can read the DOM and render a fairly accurate representation of that using <code>canvas</code>. 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.</p> <p>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.</p> <p>It <strong>does not require any rendering from the server</strong>, 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.</p> <p>Still quite limited browser compatibility (not because more couldn't be supported, just haven't had time to make it more cross browser supported).</p> <p>For more information, have a look at the examples here:</p> <p><a href="http://hertzen.com/experiments/jsfeedback/" rel="noreferrer">http://hertzen.com/experiments/jsfeedback/</a></p> <p><strong>edit</strong> The html2canvas script is now available separately <a href="https://github.com/niklasvh/html2canvas" rel="noreferrer">here</a> and some <a href="http://html2canvas.hertzen.com/" rel="noreferrer">examples here</a>.</p> <p><strong>edit 2</strong> Another confirmation that Google uses a very similar method, (in fact based on the documentation the only major difference is their async method of traversing/drawing) can be found in this presentation by Elliott Sprehn from the Google Feedback team: <a href="http://www.elliottsprehn.com/preso/fluentconf/" rel="noreferrer">http://www.elliottsprehn.com/preso/fluentconf/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload