Sujet Précédent Sujet Suivant

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:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38316 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 novembre 2024 4 705
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....
0
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 ?
0
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
0

Discussions similaires

[URGENT] Que veut dire prise (AUX IN)?
quentinel -
ankae -

18 réponses
qu'est ce qu'une prise DC IN ?
daphdu974 -
Andy31200 -

3 réponses
autoradio Android que peut-on brancher sur vidéo input
chrisia -
baladur13 -

3 réponses
Que veut dire " in da place " ?
westcoastDJ -
fyu -

9 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses