Comment faire une capture d'écran d'un site web en JavaScript côté client / comment Google l'a fait ? (pas besoin d'accéder au disque dur)

Question

Je travaille sur une application web qui doit rendre une page et faire une capture d'écran du côté du client (navigateur).

Je n'ai pas besoin que la capture d'écran soit sauvegardée sur le disque dur local, je la garde simplement dans la RAM et l'envoie au serveur d'application plus tard.

J'ai fait des recherches :

1. BrowserShots offre des services similaires...
2. Navigateurs mécanisés...
3. wkhtmltoimage...
4. Python WebKit2PNG...

Mais aucun d'entre eux ne me donne ce dont j'ai besoin, c'est-à-dire.. :

1. Traitement du côté du navigateur (générer une capture d'écran de la page). Il n'est pas nécessaire de l'enregistrer sur le disque dur ! Juste...
2. ...envoyer l'image au serveur pour un traitement ultérieur.
3. Capture de la page entière (pas seulement la partie visible)

Finalement, je suis tombé sur l'outil de rétroaction de Google (cliquez sur "rétroaction" dans le pied de page de YouTube pour le voir). Il contient JavaScript pour l'encodage JPG et deux autres énormes scripts dont je n'arrive pas à déterminer ce qu'ils font exactement...

Mais il est traité du côté client - sinon il n'y aurait pas de raison de mettre cet énorme encodeur JPEG dans le code !

Quelqu'un a-t-il une idée de la façon dont ils l'ont fait / comment je peux le faire ?

Voici un exemple de feedback (signaler un bug sur certains écrans)

Answer 1

Ceci répond à votre problème .

Vous pouvez utiliser JavaScript/Canvas pour faire le travail mais c'est encore expérimental.

Mise à jour :

Il existe maintenant une bibliothèque pour cela https://html2canvas.hertzen.com/

Answer 2

J'ai eu le même problème et l'ai résolu en utilisant le html2canvas.

1) Téléchargez et incluez html2canvas dans votre page.

2) Assurez-vous que vous avez un ID pour votre DIV, la section que vous voulez générer comme une image (Ici, je vais utiliser 'cardview' comme exemple).

3) Appelez la fonction suivante, afin de démarrer votre processus

function printDiv(div)
{
    html2canvas([document.getElementById('cardview')], {   
        onrendered: function(canvas)  
        {
            var img = canvas.toDataURL()
            $.post("save.php", {data: img}, function (file) {
            window.location.href =  "download.php?path="+ file});   
        }
    });         
}

4) Créez un fichier texte, nommez-le save.php avec le contenu suivant dans votre répertoire racine

<?php
$data = $_POST['data'];
$file = md5(uniqid()) . '.png';

// remove "data:image/png;base64,"
$uri =  substr($data,strpos($data,",")+1);

// save to file
file_put_contents('./'.$file, base64_decode($uri));

// return the filename
echo $file; exit;

5) Créez un fichier texte, nommez-le download.php avec le contenu suivant dans votre répertoire racine

<?php
$file = trim($_GET['path']);

// force user to download the image
if (file_exists($file)) {
    header('Content-Description: File Transfer');
    header('Content-Type: image/png');
    header('Content-Disposition: attachment; filename='.basename($file));
    header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    ob_clean();
    flush();
    readfile($file);
    unlink($file);
    exit;
}
else {
    echo "$file not found";
}

Maintenant, vous obtiendrez un format d'image de votre contenu HTML ! téléchargé et vous pourrez imprimer l'image dans le même format et les mêmes styles que vous aviez sur votre page.

source : http://kevinsookocheff.com/2011/07/27/saving-canvas-data-to-an-image-file-with-javascript-and-php/

Answer 3

SnapEngage fournit ce service en utilisant une applet Java. Vous pouvez utiliser leur produit http://www.snapengage.com ou recréer leur fonctionnalité en utilisant les informations provenant de http://www.barklund.org/blog/2009/10/14/how-snapabug-works/ . Vous pouvez également lire ce document à l'adresse suivante Javascript pour faire une capture d'écran d'un site web sans utiliser ActiveX .

Answer 4

Bien que cette option ne soit ni gratuite, ni libre, c'est une option très astucieuse, uniquement en javascript, qui imite le Google Feedback au millimètre près : http://bugmuncher.com/

C'est 10$/mois cependant.

Answer 5

html2canvas semble prometteur, mais je ne l'ai pas essayé.

Je reviendrai si j'ai l'occasion de tenter ma chance (jeu de mots).