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

Html Problem Overview

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?

Html Solutions

Solution 1 - Html

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.

Solution 2 - Html

If a commercial solution is an option, Check out SnapEngage. Click on the "help" button in top-right to see it in action. Here is a screenshot:-

enter image description here

Setup is pretty straight-forward you just have to copy and paste a few lines of javascript code.

SnapEngage uses a Java Applet to take screenshots, Here is a blog post about how it works.

Solution 3 - Html

Yes you can See following demo In below code I have define table inside body tag but when you run this code then it will display image snapshot.

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="js/html2canvas.js?rev032"></script> 
<script type="text/javascript">
  $(document).ready(function() {
  var target = $('body');
   html2canvas(target, {
     onrendered: function(canvas) {
     var data = canvas.toDataURL();
     alert(data);
     document.body.innerHTML="<br/><br/><br/><br/><br/><br/><img src="+data+" />";
   }
 });
});
</script>       

 </head>
 <body>  
 <h1>Testing</h1>
 <h4>One column:</h4>
 <table border="1">
 <tr>
  <td>100</td>
 </tr>
 </table>
</body>

html2canvas official Documentation:- http://html2canvas.hertzen.com/

To download html2canvas.js library you can use also if you unable to find from official link :- https://github.com/niklasvh/html2canvas/downloads [I am not responsible for this link :P :P :P]

Solution 4 - Html

You can use the element, that currently is only supported by Firefox.

background: -moz-element(#mysite);

Here #mysite is the element whose content is used as background

Open in Firefox: http://jsfiddle.net/qu2kz/3/ (tested on FF 27)

snapshot

Solution 5 - Html

I don't think that you can do that. However, you could recursively fetch clientHeight, clientWidth, offsetTop and offsetLeft to determine the positions of all elements on the page and send it back to the server.

Solution 6 - Html

On Firefox, you can create an AddOn that uses canvas.drawWindow to draw web content to a canvas. https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

I don't think there's a way to do that on WebKit at the moment.

Solution 7 - Html

It can be done, with some limitations. There are some techniques, and these are exactly how many extensions do screenshots. From your description it seems that you aren't looking for a generic, client side solution to be deployed, but just something that a user or some users could use and submit, so I guess using an extension would be fine.

Chrome:

I can point you to my opensource Chrome extension, Blipshot, that does exactly that: https://github.com/folletto/Blipshot

Just to give some background:

You can do that, as far as I know, only from inside an extension, since it uses an internal function.
The function is chrome.tabs.captureVisibleTab and require access to the tabs from the manifest.
The function grabs only the visible part of the active tab, so if you need just that it's fine. If you need something more, than, you should have a look at the whole script, since it's quite tricky to get the full page screenshot until Google fixes Bug #45209.

Firefox:

In Firefox since 1.5 you can build extensions that use a custom extension of canvas, drawWindow, that is more powerful than the chrome.tabs.captureVisibleTab equivalent of Chrome. Some informations are here: https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

Content Type	Original Author	Original Content on Stackoverflow
Question	Daniel Magliola	View Question on Stackoverflow
Solution 1 - Html	simshaun	View Answer on Stackoverflow
Solution 2 - Html	Salman von Abbas	View Answer on Stackoverflow
Solution 3 - Html	Gourav Makhija	View Answer on Stackoverflow
Solution 4 - Html	Jose Rui Santos	View Answer on Stackoverflow
Solution 5 - Html	thejh	View Answer on Stackoverflow
Solution 6 - Html	Ilmari Heikkinen	View Answer on Stackoverflow
Solution 7 - Html	Folletto	View Answer on Stackoverflow