图像调整大小画布 [英] Image resize canvas

问题描述

我试图上传图片，让它们适合不同大小的盒子....给你一个应用程序的作用的想法：人们上传图片，并将他们打印到海报上。

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

这里是一个图像，说明我有一个原始图像（来执行此操作。这样做的原因是内置的 drawImage 方法不会为您按比例缩放图像，它涉及到一小部分数学，使它正确，尤其是

我在这个库中创建了一个方法来处理这些情况，例如允许你绘制

请参阅此演示实例。

是使用此方法将您上传的图片绘制到画布中：

  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'）; ///提供现有画布的ID 
 ez.drawImageProp（image，0，0，ez.width，ez.height）; 
  

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

I'm trying to upload images and have them fit into different sized boxes....To give you an idea of what the application does: People upload images and have them printed onto posters.

For example, we'd have a poster size of 8" x 10"(live area) and the full size is 9.5" x 11.5", since the minimum DPI is 100, we typically multiple the 8x10 by 100 = 800x1000.

Here's an image explaining that I have an original image(http://i.imgur.com/Uds9rcZ.jpg) and need it to fit accordingly to the different sizes.

I may need to clarify this a bit, so ask questions if needed.

Thanks.

解决方案

I would like to suggest you use the easyCanvas library to do this. The reason for this is that the built-in drawImage method of context do not scale the image proportionally for you, and it involves a small dose of math to get it right, especially in cases where destination shape differs from original and you want it to cover the whole area.

I made a method in this library to handle situations such as these allowing you to draw the original image proportionally into any shape even if the shape doesn't correspond with the original.

See this demo for an live example.

In essence what you do is to draw your uploaded image into the canvas with this method:

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

where width and height would be that of destination.

It also has offset parameters so you can move the image around within that shape where an offset of 0.5 is center, 0 is from left and 1 is from right:

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

Assuming image is already available all you need to do is:

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

Disclaimer: I am the author of easyCanvas. easyCanvas is open-source (GPL3.0 license).

这篇关于图像调整大小画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！