YUI Library Home

Site Search (YDN & YUIBlog):

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

# ImageCropper Control (beta): Simple Crop Interface

This example shows how to make an image croppable.

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.

(function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; var crop = new YAHOO.widget.ImageCropper('yui_img'); })();

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