Супербыстрый хостинг на SSD от 115р в месяц   •   Реклама
6 747 просм
23 комм
Поделиться:

Как сделать скриншот элемента на 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>

В таком случае скриншот элемента будет создаваться и выводиться только после нажатия на указанную ссылку.

Вот все, что я хотел вам рассказать о данной библиотеке и о том, как сделать скриншот отдельного элемента на вашем сайте. Если что-то вам показалось непонятным – пишите об этом в комментариях.

ФайлРазмерСсылка
23
комментария
Навигация:
1 2
19.07 в 22:29
Спасибо, Артем! У меня не получается сохранить на сервере. Делал все как написано в https://www.pandoge.com/stati_i_sovety/vyvodim-izobrazhenie-v-kodirovke-base64-na-html-css-i-sohranyaem-ego-na-jqueryphp и ваш ответ на комментарий Саше велиханову. Ни в какую. Папка images всегда пустая.
  • 0
Jan, покажите сайт, где пробуете реализацию.
  • 0
20.07 в 23:01
Здравствуйте, Артем! Специально для тестирования создал http://canvas.hys.cz/index.html – здесь все в порядке. И http://canvas.hys.cz/test2.html – пытаюсь сохранить скриншот на сервер. Файл base-image.php (у меня все в root, поэтому слэши перед images удалил):
$name = $_SERVER["REMOTE_ADDR"]."_".time().".jpg";
$check_save = @file_put_contents("images/".$name, base64_decode($_POST["data"]));
  • 0
> http://canvas.hys.cz/index.html – здесь все в порядке.

У меня не работает. И по консоли я не вижу, чтобы при клике происходил запрос на сервер.
  • 0
21.07 в 00:06
Странно, но вдруг заработало))
  • 0
Jan, магия slim

В хроме - о.к, но в firefox не работает.
  • 0
21.07 в 00:35
В коде я не допустил ошибку?
  • 0
Jan, нет, просто FF считает это небезопасной операцией.

В index.html скрипт:

<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>

замените на:

<script>
window.onload = function() {
document.getElementById("get_images").onclick = function() {
html2canvas(document.getElementById("content")).then(function(canvas) {
var my_screen = canvas;
my_screen.crossOrigin = "anonymous";
document.getElementById("result").appendChild(my_screen);
});
};
}
</script>
  • 0
Гостям запрещено учавствовать в обсуждениях сайта. Авторизуйтесь, чтобы иметь возможность оставить свое мнение о материале или задать вопрос.
Подняться наверх