Wie man screenshot von einem div mit JavaScript?

Nein, ich weiß nicht, wie 'screenshot' auf ein element, aber was konnte Sie tun, ist ziehen Sie die quiz-Ergebnisse in ein canvas-element, dann verwenden Sie die HTMLCanvasElement Objekt toDataURL - Funktion, um eine data: URI mit dem Bild-Inhalt.

Wenn das quiz beendet ist, dies zu tun:

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 klickt auf "Capture", dies zu tun:

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

Dadurch öffnet sich ein neuer tab bzw. das Fenster mit dem 'screenshot', das dem Benutzer erlaubt, um es zu speichern. Es gibt keine Möglichkeit, rufen Sie eine "speichern unter" - dialog von Arten, so ist das die beste Sie tun können, meiner Meinung nach.

InformationsquelleAutor Delan Azabani

Nach Stunden der Forschung, habe ich endlich eine Lösung gefunden, um einen screenshot von einem element, auch wenn die origin-clean - FLAG gesetzt ist (um zu verhindern, XSS), das ist, warum Sie können sogar erfassen, wie zum Beispiel Google Maps (in meinem Fall). Ich schrieb eine Universelle Funktion, um einen screenshot. Das einzige, was Sie brauchen, außerdem 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);
}

Beachten console.log() und alert() nicht erzeugen einer Ausgabe, wenn die Größe des Bildes ist toll.

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

InformationsquelleAutor orange01

Können Sie nicht nehmen Sie ein screen-shot: es wäre ein unverantwortliches Sicherheitsrisiko zu lassen, so tun Sie dies. Sie können jedoch:

• Dinge tun, die server-Seite und ein Bild zu erzeugen
• Zeichnen etwas ähnliches wie eine Leinwand und Rendern, um ein Bild (in einem browser, der es unterstützt)
• Eine andere Zeichnung Bibliothek zum zeichnen direkt auf dem Bild (langsam, aber funktionieren würde das auf jedem browser)

InformationsquelleAutor bgw

Andere alternative ist die Verwendung GrabzIt ist JavaScript-API alles, was Sie tun müssen, ist, übergeben Sie der CSS-Auswahl div-Sie erfassen möchten. Es erstellt dann ein screenshot von eben, dass div.

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

Es gibt noch mehr Beispiele hier die Lösung, wie erfassen von HTML-Elementen. Für vollständige Offenlegung, ich bin die API-Ersteller.

InformationsquelleAutor GrabzIt

Soweit ich weiß können Sie das nicht tun, ich kann mich auch irren. Jedoch würde ich dies mit php erzeugen ein JPEG mit der php-standard-Funktionen und zeigen Sie dann das Bild, sollte nicht ein sehr harter job, aber hängt davon ab, wie Auffällig der Inhalt des DIV sind

InformationsquelleAutor Saulius Antanavicius