Как сделать скриншот области экрана на javascript?

Пользователь

от cayla , в категории: JavaScript , 10 месяцев назад

Как сделать скриншот области экрана на javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от felix , 10 месяцев назад

@cayla 

Для создания скриншота определенной области экрана в браузере на javascript необходимо использовать HTML5 API Canvas.

  1. Создайте пустой элемент canvas на странице:
  2. Получите доступ к элементу canvas и установите его размеры, соответствующие размеру области экрана, которую вы хотите захватить: var canvas = document.getElementById('canvas'); canvas.width = 500; // ширина области canvas.height = 500; // высота области
  3. Используйте метод drawImage() в контексте Canvas для отображения захваченного изображения на элементе canvas: var ctx = canvas.getContext('2d'); ctx.drawImage(screen, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
  4. Сохраните захваченное изображение на сервере или на компьютере пользователя в формате, который вам нужен. Пример: var dataURL = canvas.toDataURL('image/png'); var link = document.createElement('a'); link.download = 'screenshot.png'; link.href = dataURL; link.click(); В этом примере скрипт создает ссылку на элемент a, задает ему имя файла и URL-адрес изображения, полученного из элемента canvas методом toDataURL(), и эмулирует щелчок по этому элементу. Результатом выполнения этого скрипта будет загрузка файла screenshot.png на компьютер пользователя.