Создание скриншотов в браузере с помощью HTML5/Canvas/JavaScript

// Реализация захвата скриншота с использованием тега canvas
// Код ниже позволяет взять веб-контент, отобразить его на холсте и преобразовать в изображение.

// Предполагаем, что необходимо захватить весь экран. Создаем элемент canvas, задаем его размеры с учетом масштаба устройства, рисуем на нем содержимое страницы и добавляем полученное изображение на саму страницу.
const canvas = Object.assign(document.createElement('canvas'), {
  width: window.innerWidth * window.devicePixelRatio,
  height: window.innerHeight * window.devicePixelRatio
});
const ctx = canvas.getContext('2d');
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
ctx.drawImage(document.body, 0, 0);
const img = Object.assign(new Image(), {
  src: canvas.toDataURL()
});
document.body.appendChild(img);  // Полученное изображение добавляем на страницу.

html2canvas(document.body).then(canvas => {
    document.body.appendChild(canvas);
});

async function captureScreen() {
    try {
        const mediaStream = await navigator.mediaDevices.getDisplayMedia();
        const video = Object.assign(document.createElement('video'), {
          srcObject: mediaStream
        });
        video.onloadedmetadata = () => {
            video.play();
            const { videoWidth: width, videoHeight: height } = video;
            const captureCanvas = document.createElement('canvas');
            captureCanvas.width = width;
            captureCanvas.height = height;
            const ctx = captureCanvas.getContext('2d');
            ctx.drawImage(video, 0, 0, width, height);
            captureCanvas.toBlob(blob => {
                // Blob – это не монстр, это ваш скриншот
            });
            // Обезопасьте себя: не забудьте освободить медиа-ресурсы
            mediaStream.getTracks().forEach(track => track.stop());
        };
    } catch (error) {
        console.error('Ошибка! Не получилось сделать скриншот:', error);
    }
}

// Получаем изображения в HD-качестве!
const scale = window.devicePixelRatio;
canvas.width = window.innerWidth * scale;
canvas.height = window.innerHeight * scale;
ctx.scale(scale, scale);

canvas.toBlob(blob => {
    const reader = new FileReader();
    reader.onloadend = () => {
        const arrayBuffer = reader.result;
        // Преобразованный в ArrayBuffer Blob готов к отправке
    };
    reader.readAsArrayBuffer(blob);
});

const img = new Image();
img.onload = () => {
    // Проявите креативность! Здесь вы можете добавить интерактивные элементы
};
img.src = canvas.toDataURL();
document.body.appendChild(img);

// try-catch – это ваш надежный страж от неожиданных "сюрпризов"
try {
    // Код, который обычно работает без проблем, пишется здесь...
} catch (error) {
    //...но в случае ошибки мы ее обрабатываем здесь
    console.error('Упс: ', error);
}

// 🎨 🖼 углубляется в наблюдение и захватывает это 📷.
canvas.getContext('2d').drawImage(video, 0, 0, width, height);

setTimeout(() => ctx.drawImage(document.body, 0, 0), 0);
// Никому не нравятся "тормозящие" приложения, поэтому закладываем обратный отсчет, чтобы обеспечить плавную работу

const offscreen = new OffscreenCanvas(width, height);
const offscreenCtx = offscreen.getContext('2d');
offscreenCtx.drawImage(...);
// Здесь происходит всё "тайное", но полезное!

// При клике создаем отчет об ошибке или аннотацию на основе координат
canvas.addEventListener('click', event => {
    const x = event.pageX;
    const y = event.pageY;
    // Здесь, под X, прячется баг!
});