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

в 11:57, , рубрики: canvas, 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 все просто:

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


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js