drawImage - Redimensionner et conserver l'échelle

Question

J'essaye de redimensionner une image en utilisant drawImage mais garde l'échelle. J'ai jusqu'à présent ce ...

window.onload = function() { 
 
    var c = document.getElementById("myCanvas"); 
 
    var ctx = c.getContext("2d"); 
 
    var img = document.getElementById("scream"); 
 
    ctx.drawImage(img, 0, 0, 600, 428); 
 
}

<p>Image to use:</p> 
 
<img id="scream" width="400" height="300" src="http://lorempixel.com/1280/960/sports/" alt="The Scream"> 
 

 
<p>Canvas:</p> 
 
<canvas id="myCanvas" width="428" height="600" style="border:2px solid black;"> 
 
Your browser does not support the HTML5 canvas tag. 
 
</canvas>

Je suis en train de faire l'image remplir le récipient pour perdre l'espace blanc au fond, si je mets les dimensions exactes il devient étiré.

Est-ce que quelqu'un a un exemple à me donner?

Answer 1

Vous devez d'abord trouver les proportions de l'image et du canevas. Cela se fait par:

var canvasRatio = canvas.width/canvas.height, 
    imgRatio = img.width/img.height, 
    s = 1; 

Si un rapport est inférieur à 1, alors il est portrait, sinon si elle est égale ou supérieure à 1, il est (considéré comme) paysage.

Ensuite, vous devez comparer ces ratios comme ceci:

//the image is »more portrait« 
//to fully cover the canvas 
//scale by width 
if (imgRatio < canvasRatio) { 
    s = canvas.width/img.width; 

//image has the same, or a »more landscape« 
//ratio than the canvas 
//to cover scale by height 
} else { 
    s = canvas.height/img.height; 
} 

//scale the context 
ctx.scale(s, s); 
cts.drawImage(…); 

MISE À JOUR

Il est encore plus court de cette façon (sans rapports, pas if):

var s = Math.max(canvas.width/img.width, canvas.height/img.height); 

à adapter l'image utiliser Math.min.