Как создать скриншот вашего сайта с помощью JavaScript с помощью html2canvas

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

Чтобы создать снимок экрана вашего веб-сайта без использования сторонних сервисов, мы рекомендуем вам использовать потрясающую библиотеку html2canvas. Скрипт позволяет делать «скриншоты» веб-страниц или их частей прямо в браузере пользователя. Снимок экрана основан на DOM и, как таковой, может не быть на 100% точным к реальному представлению, поскольку он не создает фактического снимка экрана, а создает снимок экрана на основе информации, доступной на странице. Библиотека должна нормально работать в следующих браузерах (с Promise polyfill):

• Firefox 3.5+
• Гугл Хром
• Опера 12+
• IE9 +
• Safari 6+

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

Требования

Как упоминалось ранее, для создания скриншота элемента вашей DOM мы будем использовать библиотеку html2canvas. Вы можете скачать эту библиотеку с помощью NPM, используя следующую команду:

npm install html2canvas

Или, если вы предпочитаете беседку:

bower install html2canvas

В противном случае просто получите копию дистрибутивов (html2canvas.min.js) в репозитории здесь а затем просто добавьте ссылку на скрипт с тегом script:

Если вам нужна дополнительная информация о библиотеке, пожалуйста, посетите официальный репозиторий в Github здесь.

Важный

Библиотека html2canvas использует JavaScript и ожидает, что они будут доступны в глобальном контексте. Если вы хотите поддержать старые браузеры которые не поддерживают изначально Promises, вам нужно включают в себя полифилл, такой как ES6-обещание перед включением html2canvas,

Создайте скриншот вашего сайта

Библиотека html2canvas очень проста (только ее использование, так как сама библиотека довольно впечатляющая), html2canvas Функция будет отображаться в окне (или просто потребует его в качестве модуля, если вы используете browserify), эта функция ожидает в качестве первого аргумента элемент DOM, который вы хотите экспортировать как изображение. Поэтому, если вы хотите создать скриншот всего вашего сайта, вам нужно передать элемент body вашего документа в качестве первого аргумента функции html2canvas. Поскольку он возвращает обещание, вам нужно добавить then функция, которая будет выполнена, как только экспорт будет готов.

В этом примере снимок экрана будет создан в формате png, и он будет показан в новом окне, как только он будет готов:

html2canvas(document.body).then(function(canvas) {
// Export the canvas to its data URI representation
var base64image = canvas.toDataURL("image/png");
// Open the image in a new window
window.open(base64image , "_blank");
});

Довольно ясно и легко понять, не так ли?

Создать и скачать скриншот

Вам может понадобиться добавить функцию загрузки скриншота в ваше приложение. Для этого вам понадобится плагин FileSaver в вашем документе, Подробнее об этом плагине читайте в официальном репозитории Github здесь. Плагин FileSaver позволит вам сгенерировать загрузку из Blob прямо в браузере. Для скачивания сгенерированного скриншота есть 2 варианта:

С помощью метода toBlob

С HTML5 холст представил новый метод canvas.toBlob() что в отличие toDataURL, экспортирует содержимое холста напрямую как Blob. Однако этот метод доступен не во всех браузерах, но есть полифилл в случае, если вы решите использовать его таким образом. С html2canvas, методом toBlob и файловой заставкой вы можете легко сгенерировать загрузку скриншота вашего сайта:

html2canvas(document.body).then(function(canvas) {
// Export canvas as a blob
canvas.toBlob(function(blob) {
// Generate file download
window.saveAs(blob, "yourwebsite_screenshot.png");
});
});

Конвертировать base64 в Blob

Если вы не хотите связываться с большим количеством полизаполнений, если вашему приложению требуется поддержка устаревших браузеров, преобразуйте непосредственно изображение base64 в BLOB-объект, а затем сохраните его с помощью FileSaver (вам, однако, придется испортить больше кода ). Однако вам потребуется создать функцию, которая преобразует URI данных в большой двоичный объект:

/**
* Convert a base64 string in a Blob according to the data and contentType.
*
* @param b64Data {String} Pure base64 string without contentType
* @param contentType {String} the content type of the file i.e (image/jpeg - image/png - text/plain)
* @param sliceSize {Int} SliceSize to process the byteCharacters
* @see http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript
* @return Blob
*/
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
// Generate screenshot and download
html2canvas(document.body).then(function(canvas) {
// Generate the base64 representation of the canvas
var base64image = canvas.toDataURL("image/png");
// Split the base64 string in data and contentType
var block = base64image.split(";");
// Get the content type
var mimeType = block[0].split(":")[1];// In this case "image/png"
// get the real base64 content of the file
var realData = block[1].split(",")[1];// For example:  iVBORw0KGgouqw23....
// Convert b64 to blob and store it into a variable (with real base64 as value)
var canvasBlob = b64toBlob(realData, mimeType);
// Generate file download
window.saveAs(canvasBlob, "yourwebsite_screenshot.png");
});

Неважно, какой метод вы выберете, они оба работают одинаково.

Создать изображение из элемента DOM

Кроме того, вы можете создать изображение из любого элемента DOM, однако, как мы уже говорили в начале статьи, в отличие от DOM для библиотеки изображений, html2canvas плохо работает с вещами, созданными или динамически измененными с помощью JavaScript.

Чтобы создать изображение из конкретного div или элемент в вашем документе, просто выберите его и передайте в качестве первого аргумента html2canvas функция:

var element = document.getElementById("some-element-of-your-document");
html2canvas(element).then(function(canvas) {
// Export the canvas to its data URI representation
var base64image = canvas.toDataURL("image/png");
// Open the image in a new window
window.open(base64image , "_blank");
});