Use HTML5 Canvas to capture part of a web page?

问题:

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 overlay on top of a web page and then capture a PNG snapshot of that page or part of it.

I would like to enhance our website reviewing tools by adding screen capture (within the browser page) which could then be submitted to a remote server.

YouTrack does this with a Java applet but is it possible with modern HTML5 techniques?

Any other suggested solutions to this problem would also be appreciated.

Thanks

回答1:

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.

回答2:

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).

回答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/

回答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.