图像调整画布大小

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有一个版本，允许您在将图像绘制到画布时缩放图像。

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

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

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

Answer 2

我建议您使用easyCanvas library来执行此操作。这样做的原因是内置的drawImage上下文方法不会按比例缩放图像，并且它需要一小部分数学才能使其正确，特别是在目标形状与原始形状不同的情况下你希望它覆盖整个区域。

我在这个库中创建了一个方法来处理这些情况，这样你就可以按比例将原始图像绘制成任何形状，即使形状与原始形状不对应。

请参阅此demo for an live example。

实质上，您所做的是使用以下方法将上传的图像绘制到画布中：

ez.drawImageProp(image, x, y, width, height);

其中宽度和高度将是目的地。

它还有偏移参数，因此您可以在该形状中移动图像，其中偏移量为0.5为中心，0为左侧，1为右侧：

ez.drawImageProp(image, x, y, width, height, offsetX, offsetY);

假设图像已经可用，您需要做的就是：

var ez = new easyCanvas('canvas'); /// provide ID of existing canvas
ez.drawImageProp(image, 0, 0, ez.width, ez.height);

免责声明：我是easyCanvas的作者。 easyCanvas是开源的（GPL3.0许可证）。