wie kleinere Bild erstellen

Question

<img id='imgt' src='../img/crop.png' alt='img'> 

Originalgröße von imgt größer als 960 x 540.
ich in der Breite 960px Höhe und das gleiche Bild benötigen - auto.
Hier ist mein Versuch Leinwand mit:

var c1 = document.createElement("canvas"); 
c1.width = 960; 
var ctx = c1.getContext("2d"); 
var img=document.getElementById("imgt"); 
ctx.drawImage(img, 0, 0, 960, auto); 

Console sagt - auto nicht defined` aber ich habe keine Ahnung, was als Höhe param zu setzen.

ich müde ohne height param:

ctx.drawImage(img, 0, 0, 960); 

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Valid arities are: [3, 5, 9], but 4 arguments provided.

Jede Hilfe?

Gibt es vielleicht eine andere Möglichkeit, ein kleineres Bild ohne Leinwand zu produzieren?

Answer 1

können Sie folgenden Code versuchen.

var c1 = document.createElement("canvas"); 
c1.width = 960; 
var ctx = c1.getContext("2d"); 
var img=document.getElementById("imgt"); 

var _curWidth = c1.width; 
var _autoHeight = (_curWidth/img.naturalWidth) * img.naturalHeight 

ctx.drawImage(img, 0, 0, _curWidth, _autoHeight);