图像调整canvas大小

我正在尝试上传图片，让它们适合不同大小的盒子….让你了解应用程序的作用：人们上传图像并将它们打印到海报上。

例如，我们的海报尺寸为8“x 10”（实时区域），完整尺寸为9.5“x 11.5”，因为最小DPI为100，我们通常将8×10乘以100 = 800×1000。

这是一张图片，说明我有一张原始图片（ http://i.imgur.com/Uds9rcZ.jpg ），需要根据不同尺寸进行调整。

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

谢谢。

Answer 1

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

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

此示例代码仅使用宽度按比例resize。 这样你的小猫就不会伸展。

// 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库来做到这一点。 这样做的原因是上下文的内置drawImage方法不会按比例缩放图像，并且它涉及一小部分数学运算以使其正确，特别是在目标形状与原始形状不同并且您希望它的情况下覆盖整个区域。

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

有关实例，请参阅此演示 。

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

 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许可证）。