调整画布图像大小

我正在尝试上传图像并将它们放入不同大小的盒子中......为了让您了解该应用程序的功能：人们上传图像并将它们打印到海报上。

例如，我们的海报尺寸为 8" x 10"（活动区域），完整尺寸为 9.5" x 11.5"，由于最小 DPI 为 100，我们通常将 8x10 乘以 100 = 800x1000。

这是一张图片，说明我有一张原始图片（https://i.stack.imgur.com/pFcY7.jpg https://i.stack.imgur.com/pFcY7.jpg）并需要它根据不同的尺寸进行适配。

我可能需要澄清一下，所以如果需要的话可以提问。

Thanks.

Canvas 的 context.drawImage 有一个版本，允许您在将图像绘制到画布时缩放图像。

如果您不成比例地调整大小（就像在示例中所做的那样），一些调整大小的图像将从画布上脱落。然后你的小猫看起来会扭曲（在你的例子中：垂直拉伸）

此示例代码仅使用宽度按比例调整大小。这样你的小猫就不会被拉伸。

// calculate how much to scale the resulting image

var originalWidth=16;
var originalHeight=20;
var desiredWidth=20;
var scalingFactor = desiredWidth/originalWidth;

// scale the original size proportionally

var newWidth=originalWidth*scalingFactor;
var newHeight=originalHeight*scalingFactor;

// resize the canvas to fit the desired image size
// Note: canvas is a reference to your html canvas element

canvas.width=newWidth;
canvas.height=newHeight;


// Draw the image to the canvas
// This version of drawImage allows you to scale the original image
// while you are drawing it to the canvas.

context.drawImage(
    originalImage,
    0,0,originalWidth,originalHeight,
    0,0,newWidth,newHeight);