image-processing - 拉伸(stretch)图像以适合任何四边形

标签 image-processing canvas image-manipulation stretch html5-canvas

申请PhotoFiltre可以选择拉伸(stretch)图像的一部分。您选择一个矩形,然后您可以捕获顶点并将其移动到其他地方以制作任何四边形。您选择的图像部分将随之拉伸(stretch)。希望这些图片能让我的观点更清楚一点:

before

after

是否有可以处理此问题的通用算法?我想在 HTML5 Canvas 上获得相同的效果 - 给定图像和生成的角点,我希望能够以整齐地填充新四边形的方式绘制拉伸(stretch)图像。

前段时间我问了something similar ,解决方案是将图像分成三角形并拉伸(stretch)每个三角形,使每三个点对应于原始图像上的三个点。这种技术被证明是相当昂贵的,我希望是否有更通用的方法来实现这一点。

我想在 3D 渲染器中使用它,但我想使用 (2D) 四边形。

我不知道 PhotoFiltre 内部是否也使用三角形,或者它是否使用另一种(更便宜的)算法来像这样拉伸(stretch)图像。

有人可能知道是否有更便宜或更通用的方法/算法来拉伸(stretch)矩形图像,以便它填充给定四个点的四边形?

最佳答案

通常的方法是从目的地开始,选择合适的网格大小,然后为新形状中的每个点计算源图像中的对应点(可能根据您需要的质量进行插值)

关于image-processing - 拉伸(stretch)图像以适合任何四边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7149777/

相关文章:

c - C中二维卷积的实现

image-processing - 图像亮度和模糊度之间的关系

php - 如何检测图像中的 'image area' 百分比?

javascript - 网站图片效果

android - 如何在 OpenCV Android 中使用 createTrackBar()?

image-processing - 如何从文本图像中删除虚线带?

javascript - 如何用特定颜色填充整个 Canvas ?

javascript - CSS Canvas 和导航栏定位

javascript - 如何在图形的悬停转折点上显示 Y 轴值

c# - 对 4 点图像变换施加限制