Как снять снимок экрана с помощью JavaScript?

Ответ 1

Нет, я не знаю способа "скриншота" элемента, но что вы можете сделать, это вывести результаты викторины в элемент холста, а затем использовать функцию HTMLCanvasElement object toDataURL, чтобы получить data: URI с содержимым изображения.

Когда опрос завершена, сделайте следующее:

var c = document.getElementById('the_canvas_element_id');
var t = c.getContext('2d');
/* then use the canvas 2D drawing functions to add text, etc. for the result */

Когда пользователь нажимает "Захват", сделайте следующее:

window.open('', document.getElementById('the_canvas_element_id').toDataURL());

Это откроет новую вкладку или окно с "снимком экрана", что позволит пользователю сохранить его. Невозможно вызвать диалог "сохранить как", поэтому это лучшее, что вы можете сделать, на мой взгляд.

Ответ 2

Это расширение @Dathan answer, используя html2canvas и FileSaver.js.

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;


                canvas.toBlob(function(blob) {
                    saveAs(blob, "Dashboard.png"); 
                });
            }
        });
    });
});

Этот кодовый блок ждет нажатия кнопки с id btnSave. Когда это так, он преобразует div widget в элемент canvas, а затем использует интерфейс saveAs() FileSaver (через FileSaver.js в браузерах, которые его не поддерживают), чтобы сохранить div как изображение с именем "Панель мониторинга". PNG".

Пример этой работы доступен на этом fiddle.

Ответ 3

Если вы хотите иметь диалог "Сохранить как", просто передайте изображение в php script, добавляя соответствующие заголовки

Пример "все-в-одном" script script.php

<?php if(isset($_GET['image'])):
    $image = $_GET['image'];

    if(preg_match('#^data:image/(.*);base64,(.*)$#s', $image, $match)){
        $base64 = $match[2];
        $imageBody = base64_decode($base64);
        $imageFormat = $match[1];

        header('Content-type: application/octet-stream');
        header("Pragma: public");
        header("Expires: 0");
        header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
        header("Cache-Control: private", false); // required for certain browsers
        header("Content-Disposition: attachment; filename=\"file.".$imageFormat."\";" ); //png is default for toDataURL
        header("Content-Transfer-Encoding: binary");
        header("Content-Length: ".strlen($imageBody));
        echo $imageBody;
    }
    exit();
endif;?>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
<canvas id="canvas" width="300" height="150"></canvas>
<button id="btn">Save</button>
<script>
    $(document).ready(function(){
        var canvas = document.getElementById('canvas');
        var oCtx = canvas.getContext("2d");
        oCtx.beginPath();
        oCtx.moveTo(0,0);
        oCtx.lineTo(300,150);
        oCtx.stroke();

        $('#btn').on('click', function(){
            // opens dialog but location doesnt change due to SaveAs Dialog
            document.location.href = '/script.php?image=' + canvas.toDataURL();
        });
    });
</script>

Ответ 4

Вы не можете сделать снимок экрана: это безответственный риск для безопасности, который позволит вам это сделать. Однако вы можете:

• Делать что-то на стороне сервера и генерировать изображение
• Нарисуйте что-то похожее на холст и визуализируйте его на изображение (в браузере, который его поддерживает)
• Используйте некоторую другую библиотеку рисования для прямого рисования изображения (медленно, но работайте в любом браузере).

Ответ 5

После нескольких часов исследований я наконец нашел решение снять скриншот элемента, даже если установлен флажок origin-clean FLAG (чтобы предотвратить XSS), поэтому вы можете даже захватить, например, Карты Google (в мое дело). Я написал универсальную функцию, чтобы получить скриншот. Единственное, что вам нужно, это библиотека html2canvas (https://html2canvas.hertzen.com/).

Пример:

getScreenshotOfElement($("div#toBeCaptured").get(0), 0, 0, 100, 100, function(data) {
    // in the data variable there is the base64 image
    // exmaple for displaying the image in an <img>
    $("img#captured").attr("src", "data:image/png;base64,"+data);
}

Имейте в виду, что console.log() и alert() не будут генерировать вывод, если размер изображения велико.

Функция:

function getScreenshotOfElement(element, posX, posY, width, height, callback) {
    html2canvas(element, {
        onrendered: function (canvas) {
            var context = canvas.getContext('2d');
            var imageData = context.getImageData(posX, posY, width, height).data;
            var outputCanvas = document.createElement('canvas');
            var outputContext = outputCanvas.getContext('2d');
            outputCanvas.width = width;
            outputCanvas.height = height;

            var idata = outputContext.createImageData(width, height);
            idata.data.set(imageData);
            outputContext.putImageData(idata, 0, 0);
            callback(outputCanvas.toDataURL().replace("data:image/png;base64,", ""));
        },
        width: width,
        height: height,
        useCORS: true,
        taintTest: false,
        allowTaint: false
    });
}

Ответ 6

var shot1=imagify($('#widget')[0], (base64) => {
  $('img.screenshot').attr('src', base64);
});

Посмотрите htmlshot, затем проверьте раздел на стороне клиента:

npm install htmlshot

Ответ 7

Насколько я знаю, вы не можете этого сделать, я могу ошибаться. Однако я бы сделал это с помощью php, сгенерировал JPEG с использованием стандартных функций php, а затем отобразил изображение, не должен быть очень тяжелой работой, однако зависит от того, насколько ярким является содержимое DIV

Ответ 8

<script src="/assets/backend/js/html2canvas.min.js"></script>


<script>
    $("#download").on('click', function(){
        html2canvas($("#printform"), {
            onrendered: function (canvas) {
                var url = canvas.toDataURL();

                var triggerDownload = $("<a>").attr("href", url).attr("download", getNowFormatDate()+"电子签名详细信息.jpeg").appendTo("body");
                triggerDownload[0].click();
                triggerDownload.remove();
            }
        });
    })
</script>

цитата

Ответ 9

Насколько я знаю, это невозможно с помощью javascript.

Что вы можете сделать для каждого результата, создайте скриншот, сохраните его где-нибудь и укажите пользователю при нажатии на результат сохранения. (Я думаю, что никакого результата не будет всего 10, поэтому не стоит создавать 10 jpeg-изображений результатов)