Скриншот экрана пользователя через js

Question

Кто-нибудь знает как на чистом js, без применения различных библиотек, выполнить скриншот экрана пользователя.

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

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

Затем просто взять строчку и через js, вывести в виде изображения.

Скриншот окна браузера это круто, но круче будет если скриншот будет всего экрана пользователя) Если возможно.

Answer 1

Покажу пример, для этого нам потребуется подключаемая библиотека html2canvas

  function doPhoto() {
    const holst = document.querySelector('body'); 
    html2canvas(holst, {
      onrendered: (canvas) => {
        document.getElementById('screenImg').src = canvas.toDataURL();
      },
    });
  }
  // Если надо нажать на кнопку без пользователя :)
  setTimeout(() => {
    document.getElementById('doScreen').click();
  }, 3000);

<!-- Подключается добавление одной строки к сайту -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div>Создатель скриншотов</div>
<button id="doScreen" onclick="doPhoto()">Заскринить</button>
<button style="display: none" onclick="doPhoto()">Заскринить втихую</button>

<hr />
<img id="screenImg" src="" />

Можно попробовать написать без библиотек используя WebAPI getDisplayMedia, к примеру. Он позволяет захватывать полный экран пользователя, но от пользователя потребуется разрешение на выполнение данного действия

Answer 2

Скриншот полного экрана на чистом JS

Плюсы

Не нуждается подключения библиотек, серверов и.т.п.
Сохранение как файл прямо на устройстве.

Минусы

Нужно подтверждение от пользователя.
Если при подтверждении будут анимации какие-то, возможно их заденет.

const buttonCapture = document.querySelector(`button#capture`);

buttonCapture.addEventListener(`click`, async(event) => {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia({ video: true }); // Просим у пользователя разрешения снимки экрана
    const video = document.createElement(`video`); // Создаем видео
    video.srcObject = stream; // В видео передаем поток экрана
    video.autoplay = true; // Автозапуск включаем
    video.addEventListener(`play`, (event) => { // Когда видео начнет играть
      const canvas = document.createElement(`canvas`); // Создаем холст
      canvas.width = video.videoWidth; // Задаем ширину
      canvas.height = video.videoHeight; // Задаем высоту
      const context = canvas.getContext(`2d`); // Берем контекст
      if (!context) { // Если контекст не береться
        throw new ReferenceError(`Element 'context' isn't defined.`); // Кидаем в ошибку
      }
      context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); // Рисуем на холсте кадр из видео
      const a = document.createElement(`a`); // Создаем якорь
      a.download = `${new Date().toLocaleString()}.png`; // Делаем якорь для скачивая
      a.href = canvas.toDataURL(); // Передаем данные холста в якорь
      a.click(); // Активируем якорь (скачиваем)
      URL.revokeObjectURL(a.href); // Удаляем ненужную ссылку
      a.remove(); // Удаляем якорь
      canvas.remove(); // Удаляем холст
      video.remove(); // Удаляем видео
      stream.getTracks().forEach(track => track.stop()); // Отключаем потоки для захвата экрана
    });
  } catch (reason) { // Если не разрешает или падает в ошибку
    console.error(reason instanceof Error ? reason : new Error(reason)); // Выводим ошибку на консоль
  }
});

<button id="capture">Capture screenshot</button>

Внимание

Пример кода тут не запустится, потому что политика блокирует.
Попробуйте у себя в сайте.

БЛОГ НА HUSL

Скриншот экрана пользователя через js

Ответы (2 шт):

Скриншот полного экрана на чистом JS

Плюсы

Минусы

Внимание