Can you take a "screenshot" of the page using Canvas?

Daniel Magliola picture Daniel Magliola · Dec 2, 2010 · Viewed 51.5k times · Source

I have a page where we're positioning a bunch of elements using CSS, and changing their "top and left" positions using JS.

I've had reports that these things have been misaligned, but a user has the motive to lie about this to "cheat", so I'm not exactly sure whether they're telling the truth. I'm trying to find a way to figure out whether they're lying or not, and to have some "proof".

I know that Canvas has a method to copy image information from an image element, or another canvas element (kind of a BitBlt operation).

Would it be possible to somehow, with Canvas (or with something else, Flash, whatever), take a "picture" of a piece of the page?
Again, I'm not trying to take information from an <image>. I'm trying to copy what the user sees, which is comprised of several HTML elements positioned absolutely (and I care most about those positions) and somehow upload that to the server.

I understand this can't be done, but maybe I'm missing something.

Any ideas?

Answer

simshaun picture simshaun · Dec 2, 2010

Somebody asked a question earlier that's somewhat similar to this. Scroll to the bottom of Youtube and click the "Report a Bug" link. Google's Feedback Tool (Javascript driven), essentially does what you described. Judging by what I looked at of its code, it uses canvas and has a JavaScript-based JPEG encoder which builds a JPG image to send off to Google.

It would definitely be a lot of work, but I'm sure you could accomplish something similar.