Как сделать скриншот элемента на JavaScript?
Для тех, кто еще не знает, что такое скриншот (screenshot) поясню: это снимок экрана вашего компьютера.
Существует множество различных дополнений (включая стандартные функции Windows), которые позволяют сделать этот снимок.
Но мы же с вами вебмастера, а значит, пойдем куда глубже – научимся делать скриншот не всего экрана, а только сайта или отдельного его элемента.
Где это может вам пригодиться – вы решаете сами, а мне это пригодилось для написания простого модуля оформления заказа, где я смог прикреплять итоговое изображение из конструктора мебели к e-mail-письму.
Для реализации поставленных целей мы будем использовать очень классную библиотеку под названием «html2canvas».
1. Скачайте архив в конце статьи, содержимое разархивируйте и файл библиотеки загрузите к себе на сайт, после чего перед закрывающим тегом </head> подключите его:
<script type="text/javascript" src="/js/html2canvas.js"></script>Не забывайте проставить корректную ссылку до файла.
2. Далее на нужную страницу, перед закрывающим тегом </body>, вставляем скрипт, который и будет делать скриншот элемента:
<script>
window.onload = function() {
html2canvas(document.getElementById("content")).then(function(canvas) {
var my_screen = canvas;
});
}
</script>Здесь «content» – это идентификатор элемента, который и нужно заскринить, а «my_screen» – это переменная, содержащая наш снимок в формате base64.
Что мы можем сделать с полученными данными? Сохранить и вывести изображение с помощью PHP-скрипта (об этом вы можете почитать в отдельной нашей статье), а можете вставить на страницу в нужное место.
Тогда итоговый вариант скрипта будет таким:
<script>
window.onload = function() {
html2canvas(document.getElementById("content")).then(function(canvas) {
var my_screen = canvas;
document.getElementById("result").appendChild(my_screen);
});
}
</script>Где «result» – это ID элемента, куда нужно вывести ваше изображение.
Можно ли отключить автоматическое создание скриншота?
Да. Создание скриншота можно привязать к ссылке или кнопке, а как именно, я сейчас покажу.
HTML-код будет выглядеть следующим образом (все элементы вы можете разделить и поместить в нужные участки вашего сайта):
<div id="content">Hello, world!</div>
Ваш скриншот:
<div id="result"></div>
<a href="javascript: void(0);" id="get_images">Сделать скриншот элемента</a>И, соответственно, скрипт:
<script>
window.onload = function() {
document.getElementById("get_images").onclick = function() {
html2canvas(document.getElementById("content")).then(function(canvas) {
var my_screen = canvas;
document.getElementById("result").appendChild(my_screen);
});
};
}
</script>В таком случае скриншот элемента будет создаваться и выводиться только после нажатия на указанную ссылку.
Вот все, что я хотел вам рассказать о данной библиотеке и о том, как сделать скриншот отдельного элемента на вашем сайте. Если что-то вам показалось непонятным – пишите об этом в комментариях.
