Скриншот DIV блока или всего сайта

Данный пост посвящен методу создания качественного скриншота div блока или всего сайта с помощью плагина html2canvas, который преобразует содержимое div блока в изображения и выводит в отдельный элемент canvas.  Если вникнуть в сам алгоритм создания скриншота сайта, то можно увидеть, что сценарий плагина html2canvas проходит по DOM страницы, тем самым строит представление о ее структуре основываясь на свойствах объектов DOM.

В процессе использования данного плагина, некоторые элементы сайта на скриншоте могут кардинально отличаться. Данная проблема связана с тем, что плагин html2canvas еще не полностью воспринимает стили объектов (CSS).

Для получения качественного скриншота div блока и сайта, необходимо, чтобы ширина и высота canvas была равна ширине и высоте div блока (или сайта). В противном случае изображение блока получится мутным, объекты будут отображены недостаточно четко.

html2canvas плагин прост в использовании. API плагина содержит небольшое количество свойств и методов управления.

Плагин html2canvas разработан на основе функций библиотеки Jquery, поэтому для корректной работы необходимо подключить библиотеку jquery. Более подробную информацию о плагине html2canvas и демо примеры, можно посмотреть на официальном сайте.