Thoughts on screenshots via javascript

When developing one service, I was faced with the need to enable users to report errors. The problem was that the user could take a screenshot without using third-party software or service.

At first this task seemed impracticable to me, but I found html2canvas.


Download, see examples and read more can be here . In short: this thing can create a screenshot of the page in the canvas element, and is designed as a jquery plugin.
')
For example, we hang on something click:

$(document).ready(function() { $('#megaButton').live('click',function(){ //   html2canvas $('body').html2canvas(); setTimeout("makeIT()", 1000) }); }); function makeIT() { //     canvas,   : var canvas = $('canvas')[0]; //   base64 var data = canvas.toDataURL('image/png').replace(/data:image\/png;base64,/, ''); //     canvas $('canvas').remove(); //    $.post('saveCPic.php',{data:data}, function(rep){ alert(' '+rep+' ' ); }); } 

in the saveCPic.php file, everything is simple:

 <?php // - , , : $name = time().'.png'; //,     base64 file_put_contents($name, base64_decode($_POST['data'] )); //     echo( $name ); ?> 

As a result of these simple manipulations with a click on the server, a file is created with a screenshot of the current page.

This article does not pretend to be a global solution to any problem, but perhaps it will push someone into interesting thoughts or solve some problem.