Now let us adjust our JavaScript so it writes values to our form fields. So let us add a form below our image, so our markup looks like this: To provide cropping parameters to PHP file, we must use a form in which the parameters will be stored and then passed to PHP. As much as it looks great, it does nothing. Awesome, isn’t it?īut, what now? This is useless. Then we set scaling variables and by changing CSS properties of our preview div, we are showing the preview image to our user. Selection is an object which contains width, height and borders of our selection. Our plugin will send two parameters to out callback function, and image and selection. MarginTop: ‘-‘ + Math.round(scaleY * selection.y1) + ‘px’ MarginLeft: ‘-‘ + Math.round(scaleX * selection.x1) + ‘px’, Var scaleY = 100 / (selection.height || 1) Var scaleX = 100 / (selection.width || 1) We added a call to our plugin, set some parameters and a callback function which will preview our image in a smaller div. Let us create some cropping functionality, so change the above code like this: What this code does is add a div with size 100x100px and puts our image in it. As I said earlier, we will show a preview to the user, so let us create it using jQuery: So, please go to ImgAreaSelect jQuery plugin page and download the plugin.Įxtract css and scripts folder in your working folder and put this in your HTML’s head section: We will help ourselves with jQuery plugin which will achieve actual client side functionality without coding it from scratch. So, we have an image tag with id and some inline styling. So here is our markup:ĭrag on the larger image to select crop area. I will concentrate mainly on Image editor part, assuming that the client has uploaded the image. He just needs to drag on the larger image to select crop area and press submit.Īfter that you crop the image using PHP GD functionality and save the new image somewhere on disk.Ĭropping refers to the removal of the outer parts of an image to improve framing, accentuate subject matter or change aspect ratio. When your client uploads an image, he is taken to an Image edit area where he sees uploaded image and a smaller preview window. Let me explain a bit what we will achieve today. So, your client uploaded the image into your newly, freshly developed CMS and then called you to yell about distorted image, or image that just does not look good?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |