缩放图像以适合画布

Question

我有一个允许用户上传图像的表单.

加载图像后,我们会对其进行一些缩放,以便在将文件大小传回服务器之前减少其文件大小.

为此,我们将它放在画布上并在那里操纵它.

此代码将在画布上呈现缩放图像,画布大小为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传递给服务器,但只希望在用户的画布中显示较小的视图.

我在这里错过了什么？有人能指出我正确的方向吗？

提前谢谢了.

Answer 1

在第二次调用时,您将错误设置为将源的大小设置为目标的大小.
无论如何,我打赌你想要缩放图像的相同宽高比,所以你需要计算它:

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

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 ratio = image.naturalWidth / image.naturalHeight;
var width = canvas.width;
var height = width / ratio;
ctx.drawImage(image, 0, 0, width, height);

该比例将维持不变。并且在画布上绘制的图像将具有相同的比例。如果图像的高度很长，可以使用if循环，可以将canvas.width替换为其他宽度