Using HTML5/Canvas/JavaScript to take in-browser screenshots

by

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 a 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 client’s 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 client’s 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.

Still quite limited browser compatibility (not because more couldn’t be supported, just haven’t had time to make it more cross browser supported).

For more information, have a look at the examples here:

http://hertzen.com/experiments/jsfeedback/

edit
The html2canvas script is now available separately here and some examples here.

edit 2
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:
http://www.elliottsprehn.com/preso/fluentconf/

More Related Contents:

  1. HTML2canvas generates Blurry images
  2. create screenshot of webpage using html2canvas (unable to initialize properly)
  3. How to clear the canvas for redrawing
  4. HTML5 Canvas Resize (Downscale) Image High Quality?
  5. Resize image with javascript canvas (smoothly)
  6. Disable Interpolation when Scaling a
  7. How to draw an inline svg (in DOM) to a canvas?
  8. How to draw an oval in html5 canvas?
  9. Convert SVG to PNG with applied images as background to svg elements
  10. Best way to detect that HTML5 is not supported
  11. Getting mouse location in canvas [duplicate]
  12. JavaScript: Extract video frames reliably
  13. Capture frames from video with HTML5 and JavaScript
  14. JavaScript: getting ImageData without canvas
  15. jQuery equivalent of getting the context of a Canvas
  16. Load image from url and draw to HTML5 Canvas
  17. HTML Canvas: How to draw a flipped/mirrored image?
  18. make canvas as wide and as high as parent
  19. How to fill the whole canvas with specific color?
  20. HTML5 responsive canvas: resizing the browser canvas draw disappear
  21. HTML canvas – drawing disappear on resizing
  22. Is there a way to curve / arc text using CSS3 / Canvas
  23. dotted stroke in
  24. How to scale an imageData in HTML canvas?
  25. Canvas text rendering (blurry)
  26. How to detect shape on a transparent canvas?
  27. Scaling an image to fit on canvas
  28. Creating a Clickable Grid in a Web Browser
  29. How to style canvas elements with CSS
  30. canvas- Cropping images in different shapes

Leave a Comment