问题
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.
回答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.
回答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.
回答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!
来源：https://stackoverflow.com/questions/7937196/image-curving-with-php-or-html5