drawImage - Größe ändern und Skalierung beibehalten

Question

Ich versuche, ein Bild mit drawImage zu skalieren, behalte aber die Skalierung bei. Ich habe dies so weit ...

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>

Ich versuche, um den Behälter zu machen füllt das Bild, um den Leerraum am Boden zu verlieren, wenn ich die genaue Abmessungen setzte in dann wird es gestreckt.

Hat jemand ein Beispiel, können sie mich in Richtung zeigen?

Answer 1

Zuerst müssen Sie das Seitenverhältnis des Bildes und der Leinwand finden. Das geschieht durch:

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

Wenn ein Verhältnis kleiner als 1 ist, dann ist es Porträt ist, sonst, wenn er gleich oder höher als 1 ist, wird es (betrachtet wird) Landschaft.

Dann müssen Sie diese Verhältnisse wie so vergleichen:

//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(…); 

UPDATE

Es ist sogar kürzer diese Art und Weise (keine Verhältnisse, keine if):

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

zu Passen Sie das Bild verwenden Math.min.