Jump to content

merge two moving images


rahultailwal
 Share

Recommended Posts

Hi all,I have a page where i have lots of images and now after selecting any two images i go to new page and now in this page both the images have a feature of dragging. now i have a button in form saying merge. now if user drags the images in any position suppose one image is overlapping half of other images. now if i click on merge button the images should be merged and save in a new folder. I m using php for it. see attached image. i m using javascript to move the images in the page. now after user drag the two images then after clicking on merge button then the new image should be made. now what i m using is two make a new blank image having the width and height equal to the total of two images. now i m merging my first image to this blank image. by imagecopymerge function then again i m merging the second image to this image by using imagecopy method. but i m not finding the actual coordinate of two pictures and how to find which picture is on top of other.This is my code i know this is not good.$src1 = imagecreatefromjpeg("$image1");$src2 = imagecreatefromjpeg("$image2");header("Content-Type: image/jpg");$im = @imagecreatetruecolor($final_image_width, $final_image_height)or die("Cannot Initialize new GD image stream");$background_color = imagecolorallocate($im, 255, 255, 255);imagecopymerge($im, $src1,$source1_x, $source1_y, 0, 0, $image1_width, $image1_height, 100);imagecopy($im, $src2, $source2_x, $source2_y, 0, 0, $image2_width, $image2_height);header('Content-Type: image/jpg');imagepng($im);

post-92783-0-77994000-1329549837_thumb.png

Link to comment
Share on other sites

what i did is to pass the left and top style position to the php page. i m using a third white image to paste two images to it. but the height and width of this image is going very large as i m making the height and width via adding the two image width and height. which image z-index is high will be at top. but this concept is totally wrong. real mathematical calculation is needed for it. but i am unable to find where to start. see the attached image and do something for me. Thanks,

post-92783-0-82625800-1329829276_thumb.png

Link to comment
Share on other sites

I'm not sure what you're missing. The image that starts the highest would be at the top of the merged image, and the height of the merged image would be from the top of the highest image to the bottom of the lowest image. The total width would be calculated the same way, from the leftmost edge of both images to the rightmost edge of both images.

Link to comment
Share on other sites

http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspxhttp://www.quirksmode.org/js/findpos.html https://developer.mozilla.org/en/DOM/element.offsetHeighthttps://developer.mozilla.org/en/DOM/element.offsetTophttps://developer.mozilla.org/en/DOM/element.offsetWidthhttps://developer.mozilla.org/en/DOM/element.offsetLeft check the links to how to get the cordinates of an element I am not sure how you implemented drag-drop if it is based upon css you can also use style properties of he elements to determine the position of the image relative to its parent element.
Link to comment
Share on other sites

You have the coordinates of the entire space, you have the coordinates of each individual image, and you have the coordinates of the selection box. You can use all of that to figure out which parts of each image are inside the selection. It's all just math. The hard part is getting the coordinates.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...