Screenshot avec Javascript
AakiDahh
Messages postés
6
Statut
Membre
-
AakiDahh Messages postés 6 Statut Membre -
AakiDahh Messages postés 6 Statut Membre -
Bonjour,
J'essaie de faire un screenshot avec Javascript en suivant ces indications http://talkerscode.com/webtricks/take-screenshot-of-a-webpage-using-html5-and-javascript.php mais ça ne marche pas.
Le "alert" que j'ai ajouté dans la page suivante ne se lance pas :
Par contre si j'écris le code suivant à la place des lignes 8 à 17, là ça se lance :
Et dès que j'ajoute des crochets ça ne marche plus :
J'essaie de faire un screenshot avec Javascript en suivant ces indications http://talkerscode.com/webtricks/take-screenshot-of-a-webpage-using-html5-and-javascript.php mais ça ne marche pas.
Le "alert" que j'ai ajouté dans la page suivante ne se lance pas :
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script>
function take_screenshot()
{
html2canvas(document.body, {
alert("hey");
onrendered: function(canvas)
{
var img = canvas.toDataURL()
$.post("save_screenshot.php", {data: img}, function (file){
window.location.href = "save_screenshot.php?file="+ file
});
}
});
}
</script>
<body>
<div id="wrapper">
<div id="screenshot_div">
<button type="button" onclick="take_screenshot()">Take Screenshot</button>
</div>
</div>
</body>
</html>
Par contre si j'écris le code suivant à la place des lignes 8 à 17, là ça se lance :
html2canvas(document.body, alert("hey"));
Et dès que j'ajoute des crochets ça ne marche plus :
html2canvas(document.body, {
alert("hey");
});
Configuration: Windows / Firefox 67.0
3 réponses
-
Bonjour,
Commence par regarder la documentation de la librairie html2canvas...
https://github.com/niklasvh/html2canvas
Ensuite, si tu n'y arrives toujours pas... regardes dans la CONSOLE de ton navigateur si des messages d'erreurs n'apparaissent pas.
NB: Tu ne peux pas placer un "alert" n'importe où au pif dans ton code sans conséquence....
-
Merci Jordane45. La console dit ceci :
Source map error: request failed with status 404
Resource URL: http://funkypixel.guru/html2canvas.js
Source Map URL: html2canvas.js.map
Si je comprends bien, le fichier html2canvas.js.map est introuvable. Normal puisqu'il ne fait pas partie des fichiers que j'ai téléchargés. Est-ce que je suis sensé le trouver ailleurs ? -
Apparemment, l'erreur ci-dessus n'est pas grave, on peut l'ignorer.
J'essaie un second exemple pour le screenshot. Voici le lien, le code et le message d'erreur :
https://gist.github.com/homam/3162383c8b22e7af691085e77cdbb414#file-screenshot-example-html
screenshot4.html<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <form method="POST" enctype="multipart/form-data" action="/save" id="myForm"> <input type="hidden" name="img_val" id="img_val" value="" /> </form> <div id="more"> <h1> hello </h1> <button onclick="take()"> take </button> </div> <script> window.take = function() { html2canvas(document.getElementById("more"), { onrendered: function (canvas) { document.getElementById('img_val').value = canvas.toDataURL("image/png"); document.getElementById("myForm").submit(); } }) } </script>NS_ERROR_FILE_UNRECOGNIZED_PATH: screenshot4.html:16
onrendered file:///C:/Sun Alma/Wondermetry/screenshot4.html:16
complete https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js:2711
start https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js:2215
Preload https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js:2488
html2canvas https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js:2719
