缩放图像以适应canvas
我有一个允许用户上传图片的表单。
一旦图像被加载，我们对它进行一些缩放，以减less其文件大小，然后再传回服务器。
要做到这一点，我们把它放在canvas上，并在那里操作。
此代码将在canvas上呈现缩放的图像，尺寸为320 x 240像素的canvas：
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
…我只能看到canvas上的部分图像，在这种情况下是左上angular。 尽pipe实际图像尺寸大于320×240的canvas大小，但我仍然需要将整个图像“缩放”以适合canvas。
所以对于上面的代码，宽度和高度是1142×856，因为这是最终的图像大小。 我需要保持这个尺寸，以便在提交表单时传递给服务器，但只希望在用户的canvas上出现一个较小的视图。
我在这里错过了什么？ 任何人都可以指出我正确的方向吗？
提前谢谢了。
提供源图像（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”方法），请查看：
模拟背景大小：在canvas上覆盖
第二次调用的错误是将源的大小设置为目标的大小。
无论如何，我敢打赌，你想要缩放的图像相同的长宽比，所以你需要计算它：
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
