Thoughts on screenshots via JavaScript

When developing one service, I was faced with the need to allow 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 impossible to me, but I found html2canvas.


Download, see examples and read more here . In short: this thing can create a screenshot of the page in the canvas element, and is framed 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 saveCPic.php, everything is simple:

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

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