缩放图像以适应画布

Question

我有一个表单，允许用户上传图像。

加载映像后，我们对其执行一些缩放，以便在将其传递回服务器之前减小其文件大小。

为此，我们将其放置在画布上并在画布上进行操作。

这段代码将在画布上呈现缩放后的图像，画布大小为320 x 240px：

ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

... 哪里有帆布。宽度和画布。高度是图像高度和宽度x，是基于原始图像大小的比例因子。

但当我使用代码时：

ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height

...我只得到画布上图像的一部分，在这种情况下是左上角。我需要整个图像'缩放'，以适应在画布上，尽管实际图像尺寸大于320x240画布大小。

对于上面的代码，宽度和高度是1142x856，这是最终的图像大小。我需要保持这个大小，以便在提交表单时将beck传递给服务器，但只希望在画布中为用户显示一个较小的视图。

我错过了什么？谁能告诉我正确的方向？

非常感谢。

Answer 1

我猜您希望图像缩放到更小的尺寸，而不丢失尺寸比。我有一个解决办法。

var ratio = image.naturalWidth / image.naturalHeight;
var width = canvas.width;
var height = width / ratio;
ctx.drawImage(image, 0, 0, width, height);

这一比例将保持不变。您可以使用if循环如果图像的高度很长，您可以将canvas.width替换为其他宽度

Answer 2

提供源图像（img）大小作为第一个矩形：

ctx.drawImage(img, 0, 0, img.width,    img.height,     // source rectangle
                   0, 0, canvas.width, canvas.height); // destination rectangle

第二个矩形将是目标大小（源矩形将缩放到什么）。

更新2016/6：对于宽高比和定位（ala CSS'封面方法），请查看：
模拟背景大小：画布中的封面

Answer 3

您在第二次调用时出错，将源的大小设置为目标的大小
无论如何，我打赌您希望缩放图像具有相同的纵横比，因此您需要计算它：

var hRatio = canvas.width / img.width    ;
var vRatio = canvas.height / img.height  ;
var ratio  = Math.min ( hRatio, vRatio );
ctx.drawImage(img, 0,0, img.width, img.height, 0,0,img.width*ratio, img.height*ratio);

我还假设您希望将图像居中，因此代码为：

function drawImageScaled(img, ctx) {
   var canvas = ctx.canvas ;
   var hRatio = canvas.width  / img.width    ;
   var vRatio =  canvas.height / img.height  ;
   var ratio  = Math.min ( hRatio, vRatio );
   var centerShift_x = ( canvas.width - img.width*ratio ) / 2;
   var centerShift_y = ( canvas.height - img.height*ratio ) / 2;  
   ctx.clearRect(0,0,canvas.width, canvas.height);
   ctx.drawImage(img, 0,0, img.width, img.height,
                      centerShift_x,centerShift_y,img.width*ratio, img.height*ratio);  
}

您可以在jsbin中看到它：http://jsbin.com/funewofu/1/edit?js输出