wake-up-neo.net

Wie mache ich einen Screenshot eines Div mit JavaScript?

Ich baue etwas namens "HTML-Quiz". Es ist komplett mit JavaScript ausgeführt und ziemlich cool.

Am Ende erscheint ein Ergebnisfeld mit der Aufschrift "Your Results:". Es zeigt an, wie viel Zeit sie gebraucht haben, wie viel Prozent sie bekommen haben und wie viele Fragen sie direkt aus 10 gestellt haben. Ich hätte gerne einen Button mit der Aufschrift "Erfassen Sie Ergebnisse" und lassen Sie es irgendwie einen Screenshot oder etwas vom Div aufnehmen, und zeigen Sie dann das auf der Seite aufgenommene Bild an, wo es mit der rechten Maustaste klicken kann, 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 dies leicht ändern können. Wenn sie das ändern, was im Bild steht, na ja.

Kennt jemand eine Möglichkeit, dies oder ähnliches zu tun? 

141
Nathan

Nein, ich weiß nicht, wie man ein Element "scannen" kann, aber Sie können die Quizergebnisse in ein Canvas-Element zeichnen und dann mit der HTMLCanvasElement-Funktion des toDataURL-Objekts einen data:-URI mit dem Bildinhalt abrufen.

Wenn das Quiz abgeschlossen ist, machen Sie folgendes:

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, führen Sie folgende Schritte aus:

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

Dadurch wird eine neue Registerkarte oder ein Fenster mit dem 'Screenshot' geöffnet, in dem der Benutzer es 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.

77
Delan Azabani

Dies ist eine Erweiterung von @ Dathans answer mit 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 btnSave geklickt wird. Wenn dies der Fall ist, konvertiert es widget div in ein Canvas-Element und verwendet dann die saveAs () - FileSaver-Schnittstelle (ü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 gibt es auf dieser Geige .

72
Andy

Nach stundenlanger Recherche fand ich endlich eine Lösung, um einen Screenshot eines Elements zu erstellen, selbst wenn die Origin-clean-FLAG 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, dass console.log() und alert() keine Ausgabe erzeugen, 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
    });
}
7
orange01

Wenn Sie das Dialogfeld "Speichern unter" haben möchten, übergeben Sie das Bild einfach in das PHP-Skript, um die entsprechenden Header hinzuzufügen

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>
6
shukshin.ivan
var shot1=imagify($('#widget')[0], (base64) => {
  $('img.screenshot').attr('src', base64);
});

Werfen Sie einen Blick auf htmlshot package und schauen Sie sich die clientseitige Sektion an: 

npm install htmlshot
3
Abdennour TOUMI

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

  • Führen Sie serverseitige Aktionen aus und generieren Sie ein Image
  • Zeichnen Sie etwas, das einem Canvas ähnelt, und rendern Sie es für ein Bild (in einem Browser, der es unterstützt).
  • Verwenden Sie eine andere Zeichnungsbibliothek, um direkt zum Bild zu zeichnen (langsam, würde aber mit jedem Browser funktionieren)
3
bgw

Eine andere Alternative ist die Verwendung von GrabzIts JavaScript API Sie müssen lediglich den CSS-Selektor des Div übergeben, den 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 Lösen von Erfassen von HTML-Elementen . Zur vollständigen Offenlegung bin ich der API-Ersteller.

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

1
fallen.lu

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

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

div id = "auto"
div id = "chartContainer"
Wenn Sie nur Fahrzeuge erfassen möchten, verwenden Sie car Ich bin hier erfassen. Nur Auto können Sie chartContainer ändern, um den Graphen zu erfassen 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>

0