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

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?

Solution 1:

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:

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:

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:

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

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

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Related

Recent Posts