Comment redimensionner proportionnellement une image dans un canevas?

AFAIK, pour redimensionner une image chargée dans un canevas HTML5 se fera comme suit:

var img = new Image(); img.onload = function () { ctx.drawImage(img, 0, 0, 300, 200); // resizes image to 300px wide, 200px high } img.src = 'images/myimage.jpg';

Mais j'ai compris que l'image ne serait pas proportionnellement correcte. Ensuite, j'ai essayé d'utiliser un seul paramètre (comme en HTML), mais j'ai constaté que cela ne fonctionnait pas non plus.

Comment puis-je redimensionner proportionnellement l'image?

Obtenez l' img.width et img.height , puis calculez la hauteur proportionnelle en fonction de la largeur sur laquelle vous dimensionnez.

Par exemple :

 ctx.drawImage(img, 300, 0, 300, img.height * (300/img.width));

J'ai écrit un article de blog sur ce sujet l'année dernière. Vous pouvez le lire ici . Fondamentalement, il fournit une fonction pour la mise à l'échelle d'une image avec un rapport d'aspect approprié. Il comprend le soutien à la fois des orientations paysage et portrait et le dimensionnement entre les deux. Vous pouvez même choisir entre le mode "letterbox" et "pan and scan (zoom)".

Il a été écrit avec le positionnement div dans l'esprit, mais pourrait être facilement compris pour la toile.

Au bas de la page se trouve la fonction "ScaleImage". C'est peut-être ce que vous voulez. Ensuite, vous pouvez l'appliquer comme suit:

 var img = new Image(); img.onload = function () { var result = ScaleImage(img.width, img.height, 300, 200, true); ctx.drawImage(img, result.targetleft, result.targettop, result.width, result.height); // resizes image to a target size of 300x200 using letterbox mode } img.src = 'images/myimage.jpg';

Vous pouvez remplacer résultat.targetleft et result.targettop par "0" si vous ne souhaitez pas que l'image soit centrée.