How to put an image on another image

Question

I have the following script

<div class="left"> <img src="image1.jpg" height="186" width="160" /> </div> <div class="center"> <img src="image2.jpg" height="186" width="160" /> </div> <div class="right"> <img src="image3.jpg" height="186" width="160" /> </div> 

which generates the following:

I have this simple image upload form:

 <form action="upload/image" method="post"> <input type="file" name="upload_image" /> <input type="submit" /> </form> 

The reason for loading the image is to see how the circle (above) will look with the image.

Now, after loading the image, the circles will look like this:

Rice-2

Now, if you kindly review the above image, you will see that the downloaded image is attached to the circle in such a way that it is as if it were designed using Photoshop, but in fact it is not.

Now, my question is: please tell me how to insert the downloaded image into all three images of a coffee mug and make them look like number-2.

Thanks in Advance :)

PS I got the idea from this site-> http://www.zazzle.com/cr/design/pt-mug

I am trying to achieve the same as on the website (I tried for so long, but so far I have not received the result ... I could not place the downloaded image on the images of the circle).

Here is the link to download the image that I used here http://i43.tinypic.com/d66h4.png

Answer 1

Yes you can do it.

If you learn this URL from Zazzle.com, after downloading the image, it calls the program on its server - "designall.dll". He does all the magic.

As our other friends noted, achieving this effect is simply not possible using HTML, CSS, and JavaScript (without using Canvas).

But with the help of any server program you can achieve this without any problems.

As I program in LAMP, I give a solution to implement the same with PHP and ImageMagick.

• User uploads image.
• The image will be sent to the internal PHP file.
• PHP will distort the image in accordance with our requirements.
• Creates three copies and stores it in the temp folder with some unique identifier.
• In response to this, we will receive a success code.
• As soon as we get the success code, we will upload the images from the temp folder.
• When the user clicks on any type of image, we will update the image as necessary.

And as for the actual distortion code, you can use the ImageMagick plugin.

More information about the ImageMagick plugin can be found at: ImageMagick Website

More information on image distortion methods (actual wrapping) using ImageMagick can be found at: Wrapper and Distrotion . These links contain a large number of preview examples.

In our example, we need to create some static code that will distort the image every time in the same form.

Please let me know if I missed something.

Friends, please help black_belt with the best solutions, if any.

Thanks.