web-dev-qa-db-fra.com

Pouvez-vous faire une "capture d'écran" de la page en utilisant Canvas?

J'ai une page où nous positionnons un tas d'éléments en utilisant CSS et changeons leurs positions "haut et gauche" en utilisant JS.

J'ai eu des rapports que ces choses ont été mal alignées, mais un utilisateur a le motif de mentir à ce sujet pour "tricher", donc je ne sais pas exactement s'ils disent la vérité. J'essaie de trouver un moyen de savoir s'ils mentent ou non, et d'avoir une "preuve".

Je sais que Canvas a une méthode pour copier les informations sur l'image à partir d'un élément image ou d'un autre élément canvas (sorte d'opération BitBlt).

Serait-il possible, en quelque sorte, avec Canvas (ou avec autre chose, Flash, peu importe), de prendre une "photo" d'un morceau de la page?
Encore une fois, je n'essaye pas de prendre des informations d'un <image>. J'essaie de copier ce que l'utilisateur voit, qui est composé de plusieurs éléments HTML positionnés de manière absolue (et je me soucie le plus de ces positions) et de les télécharger en quelque sorte sur le serveur.

Je comprends que cela ne peut pas être fait, mais peut-être que je manque quelque chose.

Des idées?

html5canvasscreenshot
67
Daniel Magliola

Quelqu'un a posé une question un peu plus tôt. Faites défiler vers le bas de Youtube et cliquez sur le lien "Signaler un bug". L'outil de rétroaction de Google (basé sur Javascript) fait essentiellement ce que vous avez décrit. À en juger par ce que j'ai vu de son code, il utilise un canevas et dispose d'un encodeur JPEG basé sur JavaScript qui construit une image JPG à envoyer à Google.

Ce serait certainement beaucoup de travail, mais je suis sûr que vous pourriez accomplir quelque chose de similaire.

10
simshaun

Si une solution commerciale est une option, consultez SnapEngage . Cliquez sur le bouton "aide" en haut à droite pour le voir en action. Voici une capture d'écran: -

enter image description here

La configuration est assez simple, il vous suffit de copier et coller quelques lignes de code javascript.

SnapEngage utilise une applet Java pour prendre des captures d'écran, ici est un article de blog sur son fonctionnement).

7
Salman for Hire

Vous pouvez utiliser élément , qui n'est actuellement pris en charge que par Firefox.

background: -moz-element(#mysite);

Ici #mysite est l'élément dont le contenu est utilisé comme arrière-plan

Ouvrir dans Firefox: http://jsfiddle.net/qu2kz/3/ (testé sur FF 27 )

snapshot

3
Jose Rui Santos

Oui, vous pouvez voir la démo suivante Dans le code ci-dessous, j'ai défini une table à l'intérieur de la balise body, mais lorsque vous exécutez ce code, il affichera un instantané de l'image.

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test2</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="js/html2canvas.js?rev032"></script> 
<script type="text/javascript">
  $(document).ready(function() {
  var target = $('body');
   html2canvas(target, {
     onrendered: function(canvas) {
     var data = canvas.toDataURL();
     alert(data);
     document.body.innerHTML="<br/><br/><br/><br/><br/><br/><img src="+data+" />";
   }
 });
});
</script>       

 </head>
 <body>  
 <h1>Testing</h1>
 <h4>One column:</h4>
 <table border="1">
 <tr>
  <td>100</td>
 </tr>
 </table>
</body>

documentation officielle html2canvas: - http://html2canvas.hertzen.com/

Pour télécharger la bibliothèque html2canvas.js, vous pouvez également utiliser si vous ne parvenez pas à trouver à partir du lien officiel: - https://github.com/niklasvh/html2canvas/downloads [Je ne suis pas responsable de ce lien: P : P: P]

3
Gourav Makhija

Cela peut être fait, avec certaines limitations . Il existe certaines techniques, et ce sont exactement le nombre d'extensions qui font des captures d'écran. D'après votre description, il semble que vous ne recherchiez pas une solution générique côté client à déployer, mais simplement quelque chose qu'un utilisateur ou certains utilisateurs pourraient utiliser et soumettre, donc je suppose que l'utilisation d'une extension serait bien.

Chrome:

Je peux vous diriger vers mon opensource Chrome, Blipshot, qui fait exactement cela: https://github.com/folletto/Blipshot

Juste pour donner quelques informations:

  1. Pour autant que je sache, vous ne pouvez le faire que depuis l'intérieur d'une extension, car elle utilise une fonction interne.
  2. La fonction est chrome.tabs.captureVisibleTab et nécessite l'accès aux onglets depuis le manifeste.
  3. La fonction ne saisit que la partie visible de l'onglet actif, donc si vous en avez besoin, c'est bien. Si vous avez besoin de quelque chose de plus, vous devriez jeter un œil à l'ensemble du script, car il est assez difficile d'obtenir la capture d'écran de la page entière jusqu'à ce que Google corrige bogue n ° 45209 .

Firefox:

Dans Firefox depuis 1.5, vous pouvez créer des extensions qui utilisent une extension personnalisée de canvas, drawWindow, qui est plus puissante que la chrome.tabs.captureVisibleTab équivalent de Chrome. Certaines informations sont ici: https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

2
Folletto

Je ne pense pas que vous puissiez faire ça. Cependant, vous pouvez récupérer récursivement clientHeight , clientWidth , offsetTop et - offsetLeft pour déterminer la position de tous les éléments sur la page et la renvoyer au serveur.

2
thejh

Sur Firefox, vous pouvez créer un AddOn qui utilise canvas.drawWindow pour dessiner du contenu Web sur un canevas. https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

Je ne pense pas qu'il existe un moyen de le faire sur WebKit pour le moment.

2
Ilmari Heikkinen