Мысли о скриншотах через JavaScript

При разработке одного сервиса я столкнулся с необходимостью дать возможность пользователям сообщать об ошибках. Проблема заключалась в том, чтобы пользователь мог сделать скриншот без использования стороннего софта или сервиса.

Сначала эта задача показалась мне невыполнимой, но я нашел html2canvas.


Скачать, посмотреть примеры и почитать подробнее можно тут. Вкратце: эта штука умеет создавать скриншот страницы в элементе canvas, а оформлена в виде jquery плагина.

К примеру вешаем на что-нибудь клик:

            $(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+' сохранено' );
                });
            }

в файле saveCPic.php все просто:

<?php
   //создаем какое-то имя, ну, например: 
   $name = time().'.png';
  //записываем, не забывая перекодировать из base64
  file_put_contents($name, base64_decode($_POST['data'] ));
  //отдаем обратно имя созданного файла 
  echo( $name );
?>

В результате этих нехитрых манипуляций по клику на сервере создается файл со скриншотом текущей страницы.

Эта статья не претендует на глобальное решение какой-либо задачи, но возможно она натолкнет кого-нибудь на интересные мысли или решит какую-нибудь проблему.