Skip to main content

Posts

Showing posts with the label save image

Drag and Move image using jQuery and crop using PHP - Part2

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...

Drag and Move image using jQuery and crop using PHP - Part1

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 */ ...

Resizing image in C#

In this blog post I will explain in short how to load and re size an image in C# and save the resulting image in a file. Actually the process is very easy. Lets break it in chunks Loading image from a file .NET has multiple ways to load an image. 1) From a file 2) From a Stream object 3) From a GDI Bitmap object For this post we will only load image from a File.Loading image from file is straight forward. It requires calling static method FromFile of Image class , passing the file path as a parameter. Here is how Image myImage=Image.FromFile(sourcePath); Re-sizing image As we now have Image instance we have to re size it. For re-sizing we will use one overload of Bitmap class constructor which takes Image instance and new width and height for scaling. So here is the one liner to do this job Bitmap bmp=new Bitmap(myImage,newWidth,newHeight); Saving the resulting image We have a Bitmap containing scaled version of our original image.Now we will save it to a ...