Canvas.drawImage

Résolu/Fermé

magneto - 17 oct. 2019 à 23:06
magneto - 18 oct. 2019 à 14:39

Bonjour,
j'aimerai afficher une image dans un canvas en javascript. En cherchant sur internet, je suis tombé sur cet example : https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage

J'ai essayé de copier coller ce code dans un fichier html en changeant l'url de l'image avec une image sur mon pc, puis de l'ouvrir avec Firefox mais bizarrement, je n'obtiens pas le même résultat que sur le lien que j'ai donné.
La balise img s'affiche correctement mais le canvas reste vierge.

J'ai aussi essayé avec une image qui se trouve sur internet et en faisant ça, le code fonctionne. Ca à l'air de ne pas fonctionner, uniquement quand l'image se trouve sur mon pc.
Avez-vous une idée de ce qui pourrai causer ce problème et comment le corriger ?

Merci d'avance

3 réponses

Réponse 1 / 3

Thantux
18 oct. 2019 à 01:05

Bonsoir,

il n'y a pas de raison que ça ne marche pas. Vous avez probablement fait une erreur donc sans voir votre code complet dur de dire quelque chose. Que dit la console?
évidemment si vous n'avez pas les mêmes dimensions ça risque d'être différent mais il devrais s'afficher quelque chose.
Mieux que l'exemple en copier coller il serais plus simple d'écrire vous même le script pas en partant de l'exemple mais en partant de la méthode .drawImage()

https://www.w3schools.com/tags/canvas_drawimage.asp

qui nos dit

//Position the image on the canvas:
//JavaScript syntax:
 	context.drawImage(img,x,y);

//Position the image on the canvas, and specify width and height of the image:
JavaScript syntax:
 	context.drawImage(img,x,y,width,height);

//Clip the image and position the clipped part on the canvas:
//JavaScript syntax:
 	context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Avec évidemement un contexte qui est le Renderer2dContext de votre canvas et pour l'image il force à la charger dans l'exemple qu'il donne en la mettant sur la page(que je connais et n'apprécie pas pour ça).
Il est plus correct de créer dans le DOM JavaScript:

let uneImage=document.createElement('img');
uneImage.src='URL de l'image ici';

Les 2 méthodes permettent de précharger l'image.

magneto
Modifié le 18 oct. 2019 à 10:16

Bonjour,
merci pour votre réponse rapide.

Comme je l'ai dit, comme je n'arrivait pas à faire fonctionner la fonction drawImage moi-même, j'ai tout simplement copier coller le code. Donc mon code, je l'ai donné, c'est celui du lien, mis à part le nom de l'image.
Mais bon si vous insistez :

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" width="220" height="277" src="piece.png" alt="The Scream">

<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
}
</script>

<p><strong>Note:</strong> The canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>

</body>
</html>

Pour ce qui concerne la console, effectivement j'ai oublié de préciser, elle ne dit rien à part un problème d'encodage car il n'y a pas d'en-tête, mais je ne pense pas que ça ai un lien avec mon problème. Aucune erreur dans l'execution du script.

Ensuite je vous rassure, la première chose que j'ai faites, c'est regarder la documentation de la fonction drawImage, mais comme il y avait visiblement une erreur dans mon code, j'ai essayé de copier coller un example pour comprendre mon erreur. (Manifestement ça n'a pas marché)

Pour la dernière partie, je vais vous répondre encore une fois la même chose. Je suis d'accord avec vous, je ne vais pas laisser une balise img dans mon projet. Pour l'instant je cherche juste à faire fonctionner la fonction drawImage.
J'ai essayé de faire ce que vous me proposez :

<!DOCTYPE html>
<html>
<body>

<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  let uneImage=document.createElement('img');
  uneImage.src='piece.png';
  ctx.drawImage(uneImage, 10, 10);
}
</script>

</body>
</html>

Ou comme je l'ai vu a plusieurs endroits sur internet :

<!DOCTYPE html>
<html>
<body>

<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var logoImg = new Image();
  logoImg.onload = function() {
      ctx.drawImage(logoImg, 10, 10);
  };
  logoImg.src = "piece.png";
}
</script>

</body>
</html>

Mais le résultat est toujours le même, le canvas reste vierge.

Merci pour le temps que vous avez passé à me répondre.

Bonne journée

Réponse 2 / 3

jordane45 Messages postés 38347 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 décembre 2024 4 719
18 oct. 2019 à 11:39

Bonjour,

Tu peux, soit utiliser l'encodage 64
soit passer par une balise img cachée

par exemple


<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<img src="http://www.pngall.com/wp-content/uploads/2016/04/Free-Free-Download-PNG.png" id="monimageexterne" style="display:none"></img>
<script>
window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  
  /*var logoImg = new Image();
  logoImg.onload = function() {
    console.log(logoImg);
      ctx.drawImage(logoImg, 10, 10);
  };
  logoImg.src = "data:image/png;base64,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";
  */
  
  logoImg = document.getElementById('monimageexterne');
  ctx.drawImage(logoImg, 10, 10);
}
</script>

Réponse 3 / 3

magneto
18 oct. 2019 à 14:39

Je viens de comprendre mon erreur, je n'avais pas compris que l'image était redimentionnée dans la balise img et pas dans le canvas car dans l'exemple les 2 images faisaient la même taille. Hors l'image que j'utilisais était très grande et avec de la transparence dans le coin en haut à gauche, d'où le fait que je ne voyais rien.

Merci pour le temps que vous avez passé à m'aider.

Bonne journée