Screenshot avec Javascript

Fermé

AakiDahh Messages postés 6 Date d'inscription mercredi 29 mai 2019 Statut Membre Dernière intervention 25 juin 2019 - 23 juin 2019 à 17:16
AakiDahh Messages postés 6 Date d'inscription mercredi 29 mai 2019 Statut Membre Dernière intervention 25 juin 2019 - 25 juin 2019 à 11:57

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 :

<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

A voir également:

Html2canvas
Screenshot samsung - Guide
Telecharger javascript - Télécharger - Langages
Raccourci screenshot windows - Guide
Screenshot page web entière - Guide
Screenshot whatsapp - Guide

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38173 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 10 mai 2024 4 665
23 juin 2019 à 18:08

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....

Réponse 2 / 3

AakiDahh Messages postés 6 Date d'inscription mercredi 29 mai 2019 Statut Membre Dernière intervention 25 juin 2019
23 juin 2019 à 20:02

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 ?

Réponse 3 / 3

AakiDahh Messages postés 6 Date d'inscription mercredi 29 mai 2019 Statut Membre Dernière intervention 25 juin 2019
25 juin 2019 à 11:57

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

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

Ou trouver les screenshots dans Minecraft ?

java script error in the main process

Capturer une image das une vidéo

Nodejs.exe est-ce un virus

Discussions similaires

Newsletters