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() {
                        //собственно включение самого html2canvas
                        setTimeout("makeIT()", 1000)
                function makeIT()
                    //если на странице только один canvas, то можно так:
                    var canvas = $('canvas')[0];
                    //получаем картинку в base64
                    var data = canvas.toDataURL('image/png').replace(/data:image\/png;base64,/, '');
                    //все возникшие проблемы решились удалением canvas
                    //засылаем картинку на сервер
                    $.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.

    Also popular now: