Use HTML5 Canvas to capture part of a web page?

Question

I know that you can capture images from an HTML5 video stream using canvas and display them on the page. What I am interested in is can you use the canvas object to create an ov

Answer 1

You can "emulate" the screen view by reading the DOM and creating a canvas image with javascript from it. Have a look at http://hertzen.com/experiments/jsfeedback/ and the underlying html2canvas script to get an idea how you can do it with purely Javascript (no plugins or server interaction necessary).

Answer 2

This gets asked a lot. The short answer is that it can't be done for security reasons.

The longer answers include mention of the drawWindow function that only FireFox has, which only works locally (again, for security reasons). In the future it may work once the user gives permission, like in the case of the Java applets of today. In the future, it might even be part of the spec and not a one-off thing done by Mozilla.

If you're feeling crazy, you could attempt to make an entire HTML renderer, take the DOM tree for the page, and attempt to render it in Canvas. This is a fool's errand.

Answer 3

This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. 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.

http://html2canvas.hertzen.com/

Answer 4

There is a possibility to embed your HTML in a SVG image and render that SVG into canvas. There are limitations as to what the HTML can contain (e.g. no JavaScript and no external resources so images must be encoded in data URLs). Keeping that in mind, it may do your job.

This technique is documented and demoed on MDN.