Comment faire une capture d'écran d'un div avec JavaScript ?

Question

Je suis en train de construire quelque chose appelé le "Quiz HTML". C'est entièrement basé sur JavaScript et c'est plutôt cool.

À la fin, une boîte de résultats s'affiche avec la mention "Vos résultats :" et indique le temps qu'ils ont mis, le pourcentage qu'ils ont obtenu et le nombre de questions auxquelles ils ont répondu correctement sur 10. J'aimerais avoir un bouton qui dit "Capturer les résultats" et faire en sorte que cela prenne une capture d'écran ou quelque chose de la division, et ensuite montrer l'image capturée sur la page où ils peuvent faire un clic droit et "Enregistrer l'image sous".

J'aimerais vraiment le faire pour qu'ils puissent partager leurs résultats avec d'autres. Je ne veux pas qu'ils "copient" les résultats, car ils peuvent facilement les modifier. S'ils changent ce qui est écrit sur l'image, tant pis.

Quelqu'un connaît-il un moyen de faire cela ou quelque chose de similaire ?

Answer 1

Non, je ne connais pas de moyen de faire une "capture d'écran" d'un élément, mais ce que vous pourriez faire, c'est dessiner les résultats du quiz dans un élément canevas, puis utiliser la fonction HTMLCanvasElement de l'objet toDataURL pour obtenir un data: URI avec le contenu de l'image.

Lorsque le quiz est terminé, faites ceci :

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

Lorsque l'utilisateur clique sur "Capturer", faites ceci :

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

Cela ouvrira un nouvel onglet ou une nouvelle fenêtre avec la "capture d'écran", permettant à l'utilisateur de l'enregistrer. Il n'y a aucun moyen d'invoquer une sorte de dialogue "Enregistrer sous", c'est donc le mieux que vous puissiez faire à mon avis.

Answer 2

Il s'agit d'une extension de la méthode de @Dathan. réponse en utilisant html2canvas et FileSaver.js .

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

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

Ce bloc de code attend que le bouton avec l'id btnSave pour être cliqué. Lorsqu'il l'est, il convertit le widget en un élément de canevas, puis utilise l'interface FileSaver saveAs() (via FileSaver.js dans les navigateurs qui ne la prennent pas en charge de manière native) pour enregistrer le div en tant qu'image nommée "Dashboard.png".

Un exemple de ce travail est disponible à l'adresse suivante violon .

Answer 3

Consultez le site html2canvas - Captures d'écran avec JavaScript : http://html2canvas.hertzen.com/

Answer 4

Vous ne pouvez pas faire de capture d'écran : ce serait un risque de sécurité irresponsable de vous laisser faire. En revanche, vous pouvez le faire :

• Faire les choses côté serveur et générer une image
• Dessinez quelque chose de similaire à un Canvas et rendez-le en image (dans un navigateur qui le supporte).
• Utiliser une autre bibliothèque de dessin pour dessiner directement sur l'image (lent, mais fonctionnerait sur n'importe quel navigateur)

Answer 5

Jetez un coup d'œil à http://www.phantomjs.org/ . Il permet de générer une image complète de la page HTML sur le serveur et de fournir à l'utilisateur un lien pour le téléchargement.