Image curving with PHP or HTML5

Question

I am looking to achieve:

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

I have tried the answers mentioned at Curving an image that starts as a rectangle (uploaded by user), preferably using Canvas or JS

Based on the answers there, I have tried pixel wise transformation which didn't work. To understand a mesh based approach, you will need a skill set of 3d-2d developer which I don't possess.

I am a PHP developer and I am looking for an answer in either PHP or HTML5. I have tried number of things ranging from HTML5 canvas to splitting the image into smaller parts and then joining them however those don't seem to work.

A help in the right direction will be greatly appreciated.

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

To achieve a similar effect you want to try texture mapping and you need some 2d-3d subdivision and math skills. Basically the idea is to subdivide the texture in triangles and map them to the 2d coordinate using a transformation matrix. It's simplier to start with rectangles first and then use your curved form but I'm new to this too, so I don't know really if texture mapping is used at all to curve an image. Here is an example of a simple texture mapping: Image manipulation and texture mapping using HTML5 Canvas?.

In the aforementioned link there is this sub function:

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 this is information enough to start with texture mapping.

Answer 3

A posibility is to use rotoscopic animation instead of mathematical tweening. In other words, you can achieve such transformation with 5 or 6 (or as many as you want) frames that are sequentially drawn on the HTML5 canvas at your desired frame-rate.

You can easily draw each frame using Canvas native API. In your case, you just need to draw Text and then a closed path like:

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

and just adjust the corresponding values for each frame.

It should be pretty easy!