使用PHP或HTML5进行图像弯曲

Question

我希望实现：

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

我已尝试过Curving an image that starts as a rectangle (uploaded by user), preferably using Canvas or JS

中提到的答案

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

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

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

Answer 1

如果您可以使用ImageMagick，则Circular and Radial Distortion Methods examples应该非常接近。

我不知道PHP ImageMagick扩展（与从命令行调用ImageMagick相反）是否支持这一点，但它可能会支持。

Answer 2

要获得类似的效果，你想尝试纹理贴图，你需要一些2d-3d细分和数学技能。基本上，我们的想法是将纹理细分为三角形，并使用变换矩阵将它们映射到2d坐标。首先从矩形开始然后使用你的曲线形式更简单，但我也是新手，所以我不知道是否真的使用纹理贴图来弯曲图像。以下是简单纹理映射的示例：Image manipulation and texture mapping using 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这是足以从纹理映射开始的信息。

Answer 3

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

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

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

并调整每个帧的相应值。

应该很容易！