Jak zrobić zrzut ekranu div z JavaScriptem?

Tworzę coś, co nazywa się „quizem HTML”. Jest całkowicie uruchomiony w JavaScript i jest całkiem fajny.

Na końcu wyskakuje okienko wyników z napisem „Twoje wyniki:” i pokazuje, ile czasu zajęło im, jaki procent otrzymali i ile pytań otrzymali bezpośrednio na 10. Chciałbym mieć przycisk z napisem „Przechwyć wyniki” i poproś o wykonanie zrzutu ekranu lub czegoś w rodzaju elementu div, a następnie wyświetl przechwycony obraz na stronie, na którym można kliknąć prawym przyciskiem myszy i „Zapisz obraz jako”.

Naprawdę chciałbym to zrobić, aby mogli podzielić się swoimi wynikami z innymi. Nie chcę, aby „kopiowali” wyniki, ponieważ mogą to łatwo zmienić. Jeśli zmienią to, co jest napisane na obrazku, no cóż.

Czy ktoś zna sposób na zrobienie tego lub coś podobnego?

Nie, nie znam sposobu na „zrzut ekranu” elementu, ale co możesz zrobić, to narysować wyniki quizu w elemencie canvas, a następnie użyć funkcji HTMLCanvasElementobiektu, toDataURLaby uzyskać data:identyfikator URI z zawartością obrazu.

Po zakończeniu quizu wykonaj następujące czynności:

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

Gdy użytkownik kliknie „Przechwyć”, wykonaj następujące czynności:

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

Spowoduje to otwarcie nowej karty lub okna ze „zrzutem ekranu”, umożliwiając użytkownikowi jego zapisanie. Nie ma możliwości wywołania okna dialogowego „Zapisz jako”, więc moim zdaniem jest to najlepsze, co możesz zrobić.

Jest to rozszerzenie @ Datanowi za odpowiedź , używając html2canvas i FileSaver.js .

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


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

Ten blok kodu czeka na kliknięcie przycisku o identyfikatorze btnSave. Gdy tak jest, konwertuje element widgetdiv na element kanwy, a następnie używa interfejsu saveAs () FileSaver (za pośrednictwem FileSaver.js w przeglądarkach, które nie obsługują go natywnie), aby zapisać element div jako obraz o nazwie „Dashboard.png”.

Przykład takiej pracy jest dostępny pod tym skrzypcem .

Po godzinach poszukiwań w końcu znalazłem rozwiązanie, aby zrobić zrzut ekranu elementu, nawet jeśli ustawiono origin-cleanFLAG (aby zapobiec XSS), dlatego możesz nawet przechwycić na przykład Google Maps (w moim przypadku). Napisałem uniwersalną funkcję, aby uzyskać zrzut ekranu. Jedyne, czego potrzebujesz, to biblioteka html2canvas ( https://html2canvas.hertzen.com/ ).

Przykład:

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);
});

Należy pamiętać console.log()i alert()nie generuje danych wyjściowych, jeśli rozmiar obrazu jest duży.

Funkcjonować:

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
    });
}

Jeśli chcesz mieć okno dialogowe „Zapisz jako”, po prostu prześlij obrazek do skryptu php, który doda odpowiednie nagłówki

Przykładowy skrypt „wszystko w jednym” 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>

Nie możesz zrobić zrzutu ekranu: pozwolenie na to byłoby nieodpowiedzialnym zagrożeniem dla bezpieczeństwa. Możesz jednak:

• Rób rzeczy po stronie serwera i generuj obraz
• Narysuj coś podobnego do Canvas i wyrenderuj to na obrazie (w przeglądarce, która go obsługuje)
• Użyj innej biblioteki rysunków, aby rysować bezpośrednio na obrazie (wolno, ale działa w dowolnej przeglądarce)

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

Przyjrzyj się pakietowi htmlshot , a następnie dokładnie sprawdź sekcję po stronie klienta :

npm install htmlshot

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

cytat

Jest zbyt proste, możesz użyć tego kodu do przechwycenia zrzutu ekranu określonego obszaru, musisz zdefiniować identyfikator div w html2canvas. Używam tutaj 2 div-:

div id = "samochód"
div id = "chartContainer"
jeśli chcesz przechwytywać tylko samochody, użyj samochodu, który tu przechwytuje, tylko samochód możesz zmienić chartContainer, aby przechwycić wykres html2canvas ($ ( '#car') skopiuj i wklej ten kod

<html>
    <head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script>
    window.onload = function () {
    
    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        theme: "light2",
        title:{
            text: "Simple Line Chart"
        },
        axisY:{
            includeZero: false
        },
        data: [{        
            type: "line",       
            dataPoints: [
                { y: 450 },
                { y: 414},
                { y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle" },
                { y: 460 },
                { y: 450 },
                { y: 500 },
                { y: 480 },
                { y: 480 },
                { y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross" },
                { y: 500 },
                { y: 480 },
                { y: 510 }

            ]
        }]
    });
    chart.render();
    
    }
</script>
</head>

<body bgcolor="black">
<div id="wholebody">  
<a href="javascript:genScreenshotgraph()"><button style="background:aqua; cursor:pointer">Get Screenshot of Cars onl </button> </a>

<div id="car" align="center">
    <i class="fa fa-car" style="font-size:70px;color:red;"></i>
    <i class="fa fa-car" style="font-size:60px;color:red;"></i>
    <i class="fa fa-car" style="font-size:50px;color:red;"></i>
    <i class="fa fa-car" style="font-size:20px;color:red;"></i>
    <i class="fa fa-car" style="font-size:50px;color:red;"></i>
    <i class="fa fa-car" style="font-size:60px;color:red;"></i>
    <i class="fa fa-car" style="font-size:70px;color:red;"></i>
</div>
<br>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="box1">
</div>
</div>>
</body>

<script>

function genScreenshotgraph() 
{
    html2canvas($('#car'), {
        
      onrendered: function(canvas) {

        var imgData = canvas.toDataURL("image/jpeg");
        var pdf = new jsPDF();
        pdf.addImage(imgData, 'JPEG', 0, 0, -180, -180);
        pdf.save("download.pdf");
        
      
      
      }
     });

}

</script>

</html>

O ile wiem, że nie możesz tego zrobić, mogę się mylić. Jednak zrobiłbym to z php, wygenerowałbym JPEG za pomocą standardowych funkcji php, a następnie wyświetlał obraz, nie powinno to być bardzo trudne, jednak zależy to od tego, jak krzykliwa jest zawartość DIV

O ile wiem, nie jest to możliwe w przypadku javascript.

Co możesz zrobić dla każdego wyniku, stwórz zrzut ekranu, zapisz go gdzieś i wskaż użytkownika po kliknięciu wyniku zapisu. (Myślę, że żaden wynik to tylko 10, więc utworzenie obrazu wyników w formacie 10 jpeg nie jest wielkim problemem)