如何创建较小的图片

Question

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

imgt的原始尺寸大于960 x 540 我需要宽度为960px和高度的相同图像 - 自动 这是我尝试使用canvas：

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没有定义`但我不知道要把什么作为高度参数。

我累了没有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.

任何帮助？

是否有其他方法可以生成较小的图像，没有画布？

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