Capture d'écran en Javascript
Bonjour,
Avant toute chose je dois vous dire que je ne connais quasi rien au javascript, je n'ai que des notions de base (variables, etc), je l'étudie en ce moment.
Mais j'ai un petit projet qui nécessite l'usage d'un script Javascript, c'est : http://html2canvas.hertzen.com/
Il permet de faire un screenshot d'une page web.
J'ai plus ou moins réussi à l'utiliser mais je coince dès lors qu'il s'agit de modifier moi même le code, exemple :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE html>
<html>
<head>
<script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-alpha.12/html2canvas.min.js"></script>
<script>
window.addEventListener("load" , function (){
html2canvas(document.querySelector('h1').innerHTML;).then(function(canvas) {
data = canvas.toDataURL();
image = document.createElement('img');
image.src = data;
image.style.width = "500px";
image.style.height = "auto";
// After you are done styling it, append it to the BODY element
document.body.appendChild(image);
});
});
</script>
</head>
<body>
<?php
$fichier = file_get_contents('https://javascript/cours-complet/javascript-acceder-element-html.php');
echo nl2br(htmlspecialchars($fichier));
?>
<p id="p1">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<p id="p2">Je veux juste cette partie de la page.</p>
</body>
</html> |
J'ai essayé ceci en pensant que ça allait me créer une image représentant le titre H1 de la page captée par file get contents de PHP, mais je n'ai aucun résultat.
Auriez vous la possibilité de m'aider svp ?
Prendre une capture du noeud
J'ai essayé la librairie html2canvas, mais elle ne cadre pas correctement l'élément passé en paramètre.
Au final, l'image obtenue contient des zones blanches. L'élément screenshoté est décalé.
Par contre, j'ai été impressionné par la fonction Prendre une "capture du nœud" de Firefox 109.0.1
Sur la page web: clic droit / inspecter l'élément.
Une fois la console ouverte: clic droit sur la balise HTML / prendre une capture du nœud.
L'image tombe dans le répertoire des téléchargements.
Aussi, je me demande s'il n'existerait pas une instruction JavaScript, qui permettrait de capturer un élément HTML dans une image.
En mieux qu'html2canvas.
JavaScript évolue sans cesse. Si ça n'existe pas encore, à mon avis, ça ne devrait pas tarder.
Quelqu'un connaîtrait-il une instruction JS, du style
élément.capturer(résolution);
Qui déclencherait la fonction Firefox de prise d'une capture du nœud ?
Permettant d'obtenir un screenshot de l'élément, dans la résolution demandée.
Ça éviterait de trimballer 36 librairies dans le projet.
Merci.
Christian.
