- PVSM.RU - https://www.pvsm.ru -

JavaScript / Мысли о скриншотах через 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 все просто:

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


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/1862