YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: ImageCropper Control (beta): Connection Manager assisted image crop

# ImageCropper Control (beta): Connection Manager assisted image crop

This example shows how to use Connection Manager to issue an image crop request.

View example in new window.

## Setting up the Image Cropper

The ImageCropper Control will only work when applied to an image. So we place an image on the page and give it an id.

<img src="assets/yui.jpg" id="yui_img" height="333" width="500"> <div id="button1"></div> <div id="results"></div>

## Creating the ImageCropper instance

Next we call the `ImageCropper` constructor on the image.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var crop = new YAHOO.widget.ImageCropper('yui_img', { initialXY: [20, 20], keyTick: 5, shiftKeyTick: 50 }); })();

## Create the Button

Now we need to create the button that we will use to fire the Connection Manager request.

var _button = new YAHOO.widget.Button({ id: 'cropIt', container: 'button1', label: 'Crop Image', value: 'crop' });

## Setup Connection Manager

Now that we have the button created, we need to setup the Connection Manager request.

We will listen to the Button's `click` event, then fire the request.

var callback = { success: function(o) { var json = o.responseText.substring(o.responseText.indexOf('{'), o.responseText.lastIndexOf('}') + 1); var data = eval('(' + json + ')'); results.innerHTML = '<p><strong>' + data.data + '</strong></p>'; }, failure: function() { results.innerHTML = '<p><strong>An error occurred, please try again later.</strong></p>'; } }; _button.on('click', function() { var coords = crop.getCropCoords(); var url = 'assets/crop.php?top=' + coords.top + '&left=' + coords.left + '&height=' + coords.height + '&width=' + coords.width; conn = YAHOO.util.Connect.asyncRequest('GET', url, callback); });

## Full Example Source

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, conn = null, results = null; Event.onDOMReady(function() { results = Dom.get('results'); var callback = { success: function(o) { var json = o.responseText.substring(o.responseText.indexOf('{'), o.responseText.lastIndexOf('}') + 1); var data = eval('(' + json + ')'); results.innerHTML = '<p><strong>' + data.data + '</strong></p>'; }, failure: function() { results.innerHTML = '<p><strong>An error occurred, please try again later.</strong></p>'; } }; var crop = new YAHOO.widget.ImageCropper('yui_img', { initialXY: [20, 20], keyTick: 5, shiftKeyTick: 50 }); var _button = new YAHOO.widget.Button({ id: 'cropIt', container: 'button1', label: 'Crop Image', value: 'crop' }); _button.on('click', function() { var coords = crop.getCropCoords(); var url = 'assets/crop.php?top=' + coords.top + '&left=' + coords.left + '&height=' + coords.height + '&width=' + coords.width; conn = YAHOO.util.Connect.asyncRequest('GET', url, callback); }); }); })();

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### ImageCropper Control (beta) Examples:

- Simple Crop Interface
- Advanced Crop Interface
- Real Time Crop Feedback
- Connection Manager assisted image crop
- Skinning the ImageCropper

### More ImageCropper Control (beta) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings