как создать изображение меньшего размера

Question

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

Оригинальный размер imgt больше, чем 960 х 540.
мне нужно то же изображение в ширину 960px и высота - авто.
Вот моя попытка с помощью холста:

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 говорит - auto не defined`, но я понятия не имею, что ставить в высоту парам.

Я устал без height паров:

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

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

Любой помощь?

Возможно ли другой способ создания меньшего изображения без холста?

Answer 1

вы можете попробовать следующий код.

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);