小さい画像を作成する方法

Question

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

オリジナルサイズは、私は、幅960ピクセル幅と高さで同じ画像を必要とする960×540
よりも大きくなっています。ここで
はキャンバスを使用して、私の試みです：

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

コンソールは述べています - autoはdefined`はありませんが、私はどのような高さのparamとして配置する見当がつかない。 heightのparamなしの疲れ

I：

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