Bending images using PHP or HTML5

Question

I'm looking for:

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

I tried the answers mentioned in the Image Curve that starts as a rectangle (loaded by the user), preferably using Canvas or JS

Based on the answers, I tried to convert pixel mudras that didn't work. To understand the grid-based approach, you will need a 3d-2d developer skill set that I don’t have.

I am a PHP developer and I am looking for an answer in PHP or HTML5. I tried a lot of things, starting with an HTML5 canvas and breaking the image into smaller parts and then combining them, however they don't seem to work.

It will be very helpful for you to help in the right direction.

Answer 1

If you can use ImageMagick , Circular and Radial Distortion Examples should be pretty close.

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

Answer 2

To achieve a similar effect, you want to try texture mapping, and you need some 2d-3d units and math skills. Basically the idea is to split the texture in triangles and match them to the 2d coordinate using the transformation matrix. At first it’s easier to start with rectangles and then use my curved shape, but I am also new to this, so I don’t know if texture matching is really used for the image curve. Here is an example of a simple texture mapping: Image processing and texture mapping using an HTML5 canvas .

In the above link there is this subfunction:

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

Answer 3

Positivity is the use of rotoscopic animation instead of mathematical tweening. In other words, you can achieve this conversion using 5 or 6 (or as many as you like) frames that are sequentially drawn on HTML5 canvas with the required frame rate.

You can easily draw each frame using the Canvas native API. In your case, you just need to draw the text and then close the 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!