Wie mache ich einen Screenshot eines Div mit JavaScript?

Ich baue etwas namens "HTML Quiz". Es läuft komplett auf JavaScript und ist ziemlich cool.

Am Ende erscheint ein Ergebnisfeld mit der Aufschrift "Ihre Ergebnisse:" und zeigt an, wie viel Zeit sie gebraucht haben, wie viel Prozent sie bekommen haben und wie viele Fragen sie direkt von 10 bekommen haben. Ich hätte gerne eine Schaltfläche mit der Aufschrift "Ergebnisse erfassen" und irgendwie einen Screenshot oder etwas von der Div machen lassen und dann einfach das auf der Seite aufgenommene Bild anzeigen, auf das sie mit der rechten Maustaste klicken und "Bild speichern unter".

Ich würde das wirklich gerne tun, damit sie ihre Ergebnisse mit anderen teilen können. Ich möchte nicht, dass sie die Ergebnisse "kopieren", weil sie das leicht ändern können. Wenn sie ändern, was auf dem Bild steht, na ja.

Kennt jemand einen Weg, dies oder ähnliches zu tun?

Nein, ich kenne keine Möglichkeit, ein Element als "Screenshot" zu erstellen. Sie können jedoch die Quizergebnisse in ein Canvas-Element zeichnen und dann mithilfe der HTMLCanvasElementObjektfunktion toDataURLeinen data:URI mit dem Bildinhalt abrufen.

Wenn das Quiz beendet ist, gehen Sie folgendermaßen vor:

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

Wenn der Benutzer auf "Erfassen" klickt, gehen Sie wie folgt vor:

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

Dadurch wird eine neue Registerkarte oder ein neues Fenster mit dem "Screenshot" geöffnet, in dem der Benutzer ihn speichern kann. Es gibt keine Möglichkeit, eine Art "Speichern unter" -Dialog aufzurufen. Dies ist meiner Meinung nach das Beste, was Sie tun können.

Dies ist eine Erweiterung von @ Dathans Antwort unter Verwendung von html2canvas und FileSaver.js .

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


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

Dieser Codeblock wartet darauf, dass auf die Schaltfläche mit der ID btnSavegeklickt wird. Wenn dies widgetder Fall ist, konvertiert es das div in ein Canvas-Element und verwendet dann die Datei saveAs () FileSaver (über FileSaver.js in Browsern, die es nicht nativ unterstützen), um das div als Bild mit dem Namen "Dashboard.png" zu speichern.

Ein Beispiel für diese Arbeit finden Sie in dieser Geige .

Nach stundenlanger Recherche habe ich endlich eine Lösung gefunden, um einen Screenshot eines Elements zu machen, auch wenn die origin-cleanFLAG gesetzt ist (um XSS zu verhindern). Deshalb können Sie beispielsweise auch Google Maps (in meinem Fall) erfassen. Ich habe eine universelle Funktion geschrieben, um einen Screenshot zu erhalten. Das einzige, was Sie zusätzlich benötigen, ist die html2canvas-Bibliothek ( https://html2canvas.hertzen.com/ ).

Beispiel:

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

Denken Sie daran console.log()und alert()generieren Sie keine Ausgabe, wenn die Größe des Bildes groß ist.

Funktion:

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

Wenn Sie das Dialogfeld "Speichern unter" wünschen, übergeben Sie das Bild einfach an das PHP-Skript, das die entsprechenden Überschriften hinzufügt

Beispiel "All-in-One" -Skript 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>

Sie können keinen Screenshot machen: Es wäre ein unverantwortliches Sicherheitsrisiko, dies zuzulassen. Sie können jedoch:

• Machen Sie Dinge serverseitig und generieren Sie ein Image
• Zeichnen Sie etwas Ähnliches wie eine Leinwand und rendern Sie es in ein Bild (in einem Browser, der dies unterstützt).
• Verwenden Sie eine andere Zeichenbibliothek, um direkt auf das Bild zu zeichnen (langsam, funktioniert aber in jedem Browser)

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

Schauen Sie sich das HTML-Shot- Paket an und überprüfen Sie den clientseitigen Abschnitt gründlich :

npm install htmlshot

Eine andere Alternative ist die Verwendung der JavaScript-API von GrabzIt. Sie müssen lediglich den CSS-Selektor des Divs übergeben, das Sie erfassen möchten. Es wird dann ein Screenshot von nur diesem Div erstellt.

<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("YOUR APPLICATION KEY").ConvertURL("http://www.example.com/quiz.html",
{"target": "#results", "bheight": -1, "height": -1, "width": -1}).Create();
</script>

Hier finden Sie weitere Beispiele zum Erfassen der Erfassung von HTML-Elementen . Für die vollständige Offenlegung bin ich der API-Ersteller.

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

Zitat

Es ist zu einfach, dass Sie diesen Code verwenden können, um den Screenshot eines bestimmten Bereichs zu erfassen, in dem Sie die Div-ID in html2canvas definieren müssen. Ich benutze hier 2 div-:

div id = "Auto"
div id = "chartContainer"
Wenn Sie nur Autos erfassen möchten, dann verwenden Sie Auto. Ich erbebe hier nur Auto. Sie können chartContainer für die Erfassung des Diagramms ändern. Html2canvas ($ ( '#car') Kopieren Sie diesen Code und fügen Sie ihn ein

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

Soweit ich weiß, können Sie das nicht, ich kann mich irren. Allerdings würde ich dies mit PHP tun, ein JPEG mit PHP-Standardfunktionen erzeugen und dann das Bild anzeigen, sollte keine sehr schwierige Aufgabe sein, hängt jedoch davon ab, wie auffällig der Inhalt des DIV ist

Soweit ich weiß, ist dies mit Javascript nicht möglich.

Was Sie für jedes Ergebnis tun können, erstellen Sie einen Screenshot, speichern Sie ihn irgendwo und zeigen Sie dem Benutzer, wenn Sie auf Ergebnis speichern klicken. (Ich denke, kein Ergebnis ist nur 10, also keine große Sache, um ein 10-JPEG-Bild der Ergebnisse zu erstellen.)