缩放图像以适合画布

javascript html canvas html5-canvas

2022-08-30 05:36:04

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

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

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

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

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

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

但是当我去使用代码时：

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

...我只在画布上获得图像的一部分，在本例中为左上角。我需要“缩放”整个图像以适合画布，尽管实际图像大小大于320x240画布大小。

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

我在这里错过了什么？任何人都可以给我指出正确的方向吗？

提前非常感谢。

答案 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

答案 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的“覆盖”方法），请查看：
模拟背景大小：画布中的封面