YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: ImageCropper Control (beta): Real Time Crop Feedback

# ImageCropper Control (beta): Real Time Crop Feedback

This example shows how to use a few of the built in events to real time crop feedback.

View example in new window.

- Height: (91)
- Width: (150)
- Top: (20)
- Left: (20)

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

#results { border: 1px solid black; height: 83px; width: 125px; position: relative; overflow: hidden; } #results img { position: absolute; top: -20px; left: -20px; } <p><img src="assets/yui.jpg" id="yui_img" height="333" width="500"></p> <div id="results"><img src="assets/yui.jpg"></div> <ul> <li>Height: (<span id="h">91</span>)</li> <li>Width: (<span id="w">150</span>)</li> <li>Top: (<span id="t">20</span>)</li> <li>Left: (<span id="l">20</span>)</li> </ul>

## Creating the ImageCropper instance

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

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

## Hooking into the ImageCroppers Events

Next we listen for the `moveEvent` and react to the changes. By calling the `getCropCoords` method, we will be returned an object like this:

{ top: 10, left: 10, height: 100. width: 300 }

Using this information, we can use DOM to update the results with the proper information.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, results = null; Event.onDOMReady(function() { results = Dom.get('results'); var crop = new YAHOO.widget.ImageCropper('yui_img', { initialXY: [20, 20], keyTick: 5, shiftKeyTick: 50 }); crop.on('moveEvent', function() { var region = crop.getCropCoords(); results.firstChild.style.top = '-' + region.top + 'px'; results.firstChild.style.left = '-' + region.left + 'px'; results.style.height = region.height + 'px'; results.style.width = region.width + 'px'; Dom.get('t').innerHTML = region.top; Dom.get('l').innerHTML = region.left; Dom.get('h').innerHTML = region.height; Dom.get('w').innerHTML = region.width; }); }); })();

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

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