缩放图像以适合画布

Question 1

我有一个允许用户上传图像的表格。

加载图像后，我们将对其进行一些缩放，以减小其文件大小，然后再将其传递回服务器。

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

此代码将在画布上渲染缩放后的图像，画布尺寸为320 x 240px：

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

...其中canvas.width和canvas.height是图像的高度和宽度xa基于原始图像大小的缩放因子。

但是当我去使用代码时：

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

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

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

我在这里想念什么？谁能指出我正确的方向？

提前谢谢了。

Question 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的“ cover”方法），请签出：
模拟背景大小：画布中的封面

Question 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,output