The ImageCropper Control from the YUI library gives you an interactive interface for getting the dimensions to crop an image and using these dimensions in PHP, we can do some cropping.
The ImageCropper Control from the YUI library gives you an interactive interface for getting the dimensions to crop an image and using these dimensions in PHP, we can do some cropping.
The script we are going to build will
* allow users to upload an image via AJAX * then allow them to select an area for cropping * lastly, provide a download link for the cropped image.
There are 3 files we are going to use
* index.php - will contain the form for image upload as well as the cropping interface * upload.php - provides uploading functionality * crop.php - provides cropping functionality
From a technical point of view, the flow will be like this :
1. user uploads jpg image (index.php) 2. index.php then posts the image asynchronously to upload.php which will do the upload on the server, returning JSON data containing the image file name, its width and its height. 3. with the JSON data and innerHTML we put the image in our page 4. initialize the javascript cropping tool 5. generate a download link (crop.php)
Let's have a look at index.php The index.php is our main file where users will be able upload images and then download the cropped ones.
We'll need the following components from the YUI library :
* yahoo-dom-event.js - for DOM manipulation and Event handling * dragdrop - dependency for the image cropper control * element - dependency for the image cropper control * resize - dependency for the image cropper control * connection - for AJAX requests, in our case for image uploads via AJAX * json - for parsing JSON data * imagecropper - our most important control
Of course we'll use Yahoo combo handling and add the js to our page along with the CSS needed for the above controls :
Both containers will be updated via innerHTML afterwards.
AJAX upload For the AJAX upload, Code Central
has an excellent tutorial which I highly recommend. I took the code sample and modified it a bit to fit my needs. Finally I came up with a nice JSON object called uploader which has one method, carry. The latter just posts form data to a specified URL.
uploader = { carry: function(){ // set form YAHOO.util.Connect.setForm('uploadForm', true); // upload image YAHOO.util.Connect.asyncRequest('POST', 'upload.php', { upload: function(o){ // parse our json data var jsonData = YAHOO.lang.JSON.parse(o.responseText);
It's very important to specify the image width and height else the image cropper won't work. Next we initialize another JSON object, photoshop which we'll have a look now.
Our photoshop object
photoshop = { image: null, crop: null,
init: function(image){ // set our image photoshop.image = image;
// our image cropper from the uploaded image photoshop.crop = new YAHOO.widget.ImageCropper('yuiImg'); photoshop.crop.on('moveEvent', function() { // get updated coordinates photoshop.getCroppedImage(); }); },
The init function iniatializes the YUI image cropper from the uploaded image which has yuiImg as id.
photoshop.crop = new YAHOO.widget.ImageCropper('yuiImg');
We also subscribe to the moveEvent for the cropper since we'll need to update the download link for the cropped image. So whenever the image cropper is moved/resized, we call the getCroppedImage function.
photoshop.crop.on('moveEvent', function() { // get updated coordinates photoshop.getCroppedImage(); });
The getCroppedImage function will generate the download link for the cropped image. To do image cropping in PHP we'll need
* the image we want to crop * the X,Y coordinates * height and width of the to be cropped area
Fortunately the YUI cropper utility has a function which will give us what we want, it's the getCropCoords() method. So, whenever the getCroppedImage function is called, we get the coordinates of the cropped area, build a URL and finally put the download link in our downloadLink container.
// get coordinates var coordinates = photoshop.getCoordinates();
The upload.php file too is self explanatory, we check for a jpg image only, then generate an unique filename, put it in the images folder and finally build json data which we'll use for DOM manipulation. Of course the images folder must be writable by the web server.
Then we create 2 images, the original one and the cropped one, and use the imagecopyresized function to generate the cropped image. We add some header information to tell the world it's an image and prompt for a save dialog.
JSON in JAVA JSON is being widely used in Web Technology for data transfer in JavaScript. But with AJAX coming into picture JSON has become the most popular tool for sending data from remote page to the calling page.
JavaScript Ajax Wrapper The idea behind this post is not about calling a specific crmservice but a general idea of how you can facilitate calls to any webservice, whether it’s a custom one you built your self or one of crm’s existing services.
Build a Shopping Cart in ASP.NET Shopping carts are very important and can many times be the most intimidating part of building an e-commerce site. This tutorial will show how easy it can be to implement a shopping cart using ASP.NET.
AJAX Design Patterns how to design and build a complete site and not just some fancy little details like how to turn caching in AJAX off or how to create a fancy widget. To keep the tutorial readable, and to avoid having to implement low level functionality, IGÇÖm using the d
ASP.NET MVC and JSON In the AJAX community, JSON have become the preferred way of sending and receiving data. That’s not surprising since it’s lightweight, fast and easy to understand.
Creating an Autosuggest Textbox with JavaScript, Part 2 In the first part of this series, you learned how to create type ahead functionality in a textbox, which presents the user with a single suggestion for what they've already typed. This article builds upon that functionality by adding a dropdown list of mu
Ajax Projects
