How to generate images in php and jquery?

Is there a way I can generate a single image out of several images dragged and dropped by the user at some positions of a div container?

I tried doing this using h开发者_运维知识库tml5 canvas, however html5 canvas doesn't integrate using jquery to change the source of the images in a canvas.

You could post the image URLs and coordinates to a PHP script, and then (server-side) assemble the various images into one by using the PHP image manipulation functions.

EDIT

I'll give some short guidelines on how you can accomplish your task.

You will have a form with 3 arrays of hidden <input>s: image URLs, x coordinates and y coordinates of the placed images. They will be populated via jquery as the user drops images into the container.

The assembling script would work in a similar manner:

1. Create a (big) empty container image (with imagecreatetruecolor()), let's call it $imcont

2. Read sequentially the POSTed URLs (e.g. $_POST['url'][$i]), open the corresponding image, and create an image for each one, with, e.g., imagecreatefromstring(file_get_contents($_POST['url'][$i]));

   if you need the small image's dimensions, you can use getimagesize() like this:

   list($iwidth,$iheight) = getimagesize($_POST['url'][$i]);

3. imagecopy() the image created at pt. 2 into $imcont, at the corresponding POSTed coordinates (e.g. $_POST['xcoords'][$i],$_POST['ycoords'][$i])
4. Repeat pt. 2 and 3 for each posted image.
5. Save the generated image $imcont, e.g. if you want to create a jpeg image, use imagejpeg().

Please note

• To POST arrays from a form, use [] after the input name, e.g. <input name="foo[]" ... > ;
• $i is the index in the for loop;
• normally, you don't post the entire filesystem path,as required by file_get_contents(), so you'll likely have to prepend images' base directory to $_POST['url'][$i];
• if you want to read images from an URL like http://www.site.com/image.jpg (opposite to a filesystem path like /usr/share/images/image.jpeg), you'll need allow_url_fopen enabled in your PHP config;
• images will be copied into the container in the z-order of processing, i.e. the first one will be pasted below all the others.

@Mohamed

If you want an example code maybe this will help you out a little bit http://www.bolducpress.com/tutorials/how-to-make-custom-avatars-with-php/2/