jquery - 图像调整 Canvas

Question

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

例如，我们的海报尺寸为 8"x 10"(实时区域)，完整尺寸为 9.5"x 11.5"，因为最小 DPI 为 100，我们通常将 8x10 乘以 100 = 800x1000 .

这是一张图片，说明我有一张原始图片 ( http://i.imgur.com/Uds9rcZ.jpg ) 并需要它相应地适应不同的尺寸。

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

谢谢。

Answer 1

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

如果您不成比例地调整大小(就像您在示例中所做的那样)，一些调整后的图像会从 Canvas 上掉下来。然后你的小猫会看起来扭曲(在你的例子中:垂直拉伸(stretch))

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

// 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);