Some Random Stuff

In Part 1 we discussed how to make image draggable using simple jQuery. In this part we will learn how to save the dragged image using PHP . We will crop the part that is outside our  view port div (which is of resolution 850x600 ). First retrieve the original width and height of image. To do this we will use getimagesize function of PHP . It takes file path as input and return the array containing width at index 0 and height at index 1 $file_path="movable.jpg" $size=getimagesize($file_path); $width=$size[0]; $height=$size[1]; Get current x and y of image. In the HTML FORM written in Part 1 we have hidden fields with name locationX and locationY containing X and Y co-ordinates respectively. $x=$_POST["locationX"]; $y=$_POST["locationY"]; Next step is to check if any part of image is outside our bounding box (div). We will do this separately for width(horizontal view) and height (vertical view). For horizontal view If sum of curren...

Web developers on some occasions are required to give user the ability to move image to fit the view or crop some part of image. In this blog post we will see how to allow user to drag/move image using jQuery and save the result (cropped) in new image file using PHP. I have break this in two posts. Part 1 will contain client side part. Part 2 will contain server side (PHP) part. Client side part (HTML+ jQuery) Add a reference to jQuery library. I am using version 1.8 for this example <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> Display image inside a div. Div will be of fixed width and height which will be our viewport. Part of image outside this div will be cropped . For this example lets keep it to 850x600 . First write a simple css to apply on this div #imgContainer {     width:850px;     height:600px;     overflow:hidden; /* part of image outside this div should be hidden */ ...