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.
