CODEWITHSUNDEEP
phpjqueryimagedrag-and-drop
Mohamed Said
Mohamed Said

Reputation: 4623

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 html5 canvas, however html5 canvas doesn't integrate using jquery to change the source of the images in a canvas.

Upvotes: 0

Views: 1146

Answers (2)

Fad
Fad

Reputation: 9858

@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/

Upvotes: 1

Paolo Stefan
Paolo Stefan

Reputation: 10283

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.

Upvotes: 3

Related Questions