rahultailwal Posted February 18, 2012 Share Posted February 18, 2012 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); Link to comment Share on other sites More sharing options...
justsomeguy Posted February 20, 2012 Share Posted February 20, 2012 Javascript needs to send all of the positioning and layer information to PHP. You should be able to use Javascript to determine the positions of each image and which is on bottom. Link to comment Share on other sites More sharing options...
rahultailwal Posted February 21, 2012 Author Share Posted February 21, 2012 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, Link to comment Share on other sites More sharing options...
justsomeguy Posted February 21, 2012 Share Posted February 21, 2012 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 More sharing options...
rahultailwal Posted February 22, 2012 Author Share Posted February 22, 2012 you are right the height and width of the final image can be calculated easily. the attached image is only one case. the images can be any where. and then the problem is how to find the right coordinates to make the third image. Hope you understand what i m trying to do. Thanks Link to comment Share on other sites More sharing options...
justsomeguy Posted February 22, 2012 Share Posted February 22, 2012 I understand what you're trying to do, but I don't know what you're missing. If you have the positions and dimensions of both images then you can figure everything else out with a little math. Link to comment Share on other sites More sharing options...
birbal Posted February 22, 2012 Share Posted February 22, 2012 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 More sharing options...
rahultailwal Posted February 23, 2012 Author Share Posted February 23, 2012 Thanks birbal, I made the application for small images. but the question now for very large images who are not seeing properly in a page. and need to merge them with same drag drop feature. and one thing more is now i need to crop moving images at once now suggest me the right way to do it. Thanks Link to comment Share on other sites More sharing options...
justsomeguy Posted February 23, 2012 Share Posted February 23, 2012 http://www.google.com/search?client=opera&rls=en&q=javascript+crop+images&sourceid=opera&ie=utf-8&oe=utf-8&channel=suggest Link to comment Share on other sites More sharing options...
rahultailwal Posted February 24, 2012 Author Share Posted February 24, 2012 There are lot of examples of cropping one image but how to crop two images who are overlapping or we are dragging them according to our use. now how to find which part is of first image and which part is of second images. because we have only one selection box. Link to comment Share on other sites More sharing options...
justsomeguy Posted February 24, 2012 Share Posted February 24, 2012 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.