Yahoo! Developer Network Home - Help

Site Search (YDN & YUIBlog):

# YUI Library Examples: ImageCropper Control (beta): Advanced Crop Interface

# ImageCropper Control (beta): Advanced Crop Interface

This example shows how to make an image croppable with some advanced features.

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

## Creating the ImageCropper instance

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

In this example, we are setting up a few advanced configs:

- `initialXY`: The initial position of the crop region (defaults to [10, 10]).
- `initHeight`: The inital height of the crop region (defaults to 1/4 the height).
- `initWidth`: The inital width of the crop region (defaults to 1/4 the width).
- `keyTick`: The tick interval for the arrow keys (defaults to 1 pixel)
- `shiftKeyTick`: The tick interval for the arrow keys when the shift key is pressed (defaults to 10 pixels)

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

### YUI Logger Output:

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

Reload with logging
and debugging enabled.

### ImageCropper Control (beta) Examples:

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