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

I'm pretty sure that all browsers that support Canvas do off-screen rendering then composite into the page after drawing commands, so that would make this impossible. Sorry. — Iain Ballard
– Iain Ballard, Commented Jun 24, 2011 at 14:06
possible duplicate of Using HTML5/Canvas/Javascript to take screenshots — ChrisF
– ChrisF, Commented Mar 8, 2013 at 14:19
Have a look at Screensharing a browser tab in HTML5. It's about screensharing, but you can simplify this to just take a single page screenshot. — falconepl
– falconepl, Commented Oct 10, 2015 at 11:27

Niklas · Accepted Answer · 2011-07-13 16:36:56Z

13

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

answered Jul 13, 2011 at 16:36

Niklas

30k5 gold badges54 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simon Sarris · Accepted Answer · 2011-06-24 14:05:43Z

7

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.

answered Jun 24, 2011 at 14:05

Simon Sarris

64.3k13 gold badges150 silver badges175 bronze badges

Comments

RWHepburn · Accepted Answer · 2013-07-12 17:43:41Z

1

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/

answered Jul 12, 2013 at 17:43

RWHepburn

4053 silver badges9 bronze badges

Comments

user7610 · Accepted Answer · 2012-11-30 19:19:12Z

0

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.

answered Nov 30, 2012 at 19:19

user7610

29.9k18 gold badges150 silver badges170 bronze badges

Collectives™ on Stack Overflow

Use HTML5 Canvas to capture part of a web page?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related