CODEWITHSUNDEEP
phpjavascripthtml
CdB
CdB

Reputation: 4908

Combine (merge) images with drag & drop

Image this scenario: There is a picture locally in my server, where a sketch is displayed, and there is a "blank hole" area on it.
Then, a user can upload another picture to my server.

What i'm trying to achieve is this: After image upload is finished, the first image (the one with the "hole") is displayed, and behind it is displayed the user's photo, so that you can see it through the "blank hole" area of the first photo.

Then the user can move his picture (drag & drop style) so he can choose which area of it is visible through the "blank hole". Then i would like to save the result - by merging the 2 photos or keeping the position of the user's picture in a db so i can display it again later.
(Something like this more or less)

What kind of technollogy should i look for? I'd guess javascript(for the drag & drop) or html5 or php(for merging the photo)?
Are there any libraries that i can use?

I hope my explanation isn't too messy, i didn't even know how to google for it.

Upvotes: 0

Views: 3425

Answers (3)

Jon
Jon

Reputation: 437914

I don't know if there are better solutions (and I suspect there are), but I suspect all of this can be done with not too much trouble. Here's a rundown of one way to approach the problem:

  1. Use a JavaScript-powered "upload widget" such as uploadify to enable your user to upload "his" image to the server. The server will do some processing on the image (e.g. resize and crop to suitable dimensions) and save it using e.g. PHP's gd library. It will return a URL to the "prepared" image back to the browser -- all of this through AJAX.
  2. The browser then has a URL to the user's image, so using more Javascript you can dynamically add an element that displays it inside the page and allow the user to move it around with e.g. jQuery draggable. Compositing the draggable image behind your static content (the image with the "hole") is a detail you will have to take care of using a combination of HTML, CSS and again Javascript.
  3. When the user is done, use an AJAX call (e.g. again jQuery) to inform the server of the image's positioning (this will be available through the facilities of the Javascipt framework you have selected). The server can then "compose" the two images together (gd or something equivalent once more) and return to the browser a URL through which the final product can be accessed.

Of course there are lots of details to take care of here, but knowing exactly what the plan is should help you get started.

Upvotes: 1

Damen TheSifter
Damen TheSifter

Reputation: 911

Ok to get you started, yes use a JavaScript drag and drop module for the placing of the image. You can record the x /y cordinates relative to the container. Do the image merging with a PHP image library / Class. Something like this : http://www.phpclasses.org/package/3930-PHP-Generate-an-image-from-the-combination-of-2-images.html

Upvotes: 1

Ben D
Ben D

Reputation: 14509

Have a look at the PHP GD extension. If it's installed, it's pretty easy to have an image (with a transparent center) to be merged on top of a second image that a user would upload.

Have a look at http://php.net/manual/en/function.imagecopymerge.php

Upvotes: 1

Related Questions