Skip to main content

Posts

Showing posts with the label crop

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