php - 使用 PHP 或 HTML5 进行图像弯曲

Question

我希望实现：

http://i53.tinypic.com/2gule04.jpg

我已经尝试过弯曲一个以矩形开头的图像（由用户上传）中提到的答案，最好使用 Canvas 或 JS

根据那里的答案，我尝试了像素转换，但没有奏效。要了解基于网格的方法，您需要具备我不具备的 3d-2d 开发人员技能。

我是一名 PHP 开发人员，我正在寻找 PHP 或 HTML5 的答案。我尝试了很多东西，从 HTML5 画布到将图像分割成更小的部分，然后加入它们，但这些似乎不起作用。

非常感谢您在正确方向上的帮助。

Answer 1

If you can use ImageMagick, the Circular and Radial Distortion Methods examples should come pretty close.

I don't know whether the PHP ImageMagick extension (as opposed to calling ImageMagick from the command line) supports this as well, but it might.

Answer 2

一种可能性是使用旋转动画而不是数学补间。换句话说，您可以使用 5 或 6 个（或任意数量的）帧来实现这种转换，这些帧以您想要的帧速率在 HTML5 画布上顺序绘制。

您可以使用 Canvas 原生 API 轻松绘制每一帧。在您的情况下，您只需要绘制文本，然后绘制一个封闭路径，例如：

ctx.beginPath();
ctx.moveTo(...);
ctx.arc(...);
ctx.lineTo(...);
ctx.arc(...);
ctx.lineTo(...);
ctx.closePath();

只需调整每一帧的相应值。

这应该很容易！

Answer 3

要获得类似的效果，您需要尝试纹理映射，并且需要一些 2d-3d 细分和数学技能。基本上，这个想法是将纹理细分为三角形，并使用变换矩阵将它们映射到 2d 坐标。首先从矩形开始，然后使用你的弯曲形式更简单，但我也是新手，所以我真的不知道是否使用纹理映射来弯曲图像。下面是一个简单纹理映射的示例：使用 HTML5 Canvas 进行图像处理和纹理映射？.

在上述链接中有这个子功能：

n the following code I assume you have a picture object texture  and 4 corners each of   
which is an object with fields x,y,u,v  where x,y are pixel coordinates on the target      canvas   and u,v  are pixel coordinates on texture:

IMO 这是足以从纹理映射开始的信息。