API: imagecropper YAHOO.widget.ImageCropper (YUI Library)

# Yahoo! UI Library

### imagecropper 2.8.1

Yahoo! UI Library > imagecropper > YAHOO.widget.ImageCropper
Search:
Filters Show Private Show Protected Show Deprecated

## Class YAHOO.widget.ImageCropper - extends YAHOO.util.Element

Creates a Image Cropper control.

### Constructor

YAHOO.widget.ImageCropper `( el , attrs )`

Parameters:
  `el <String/HTMLElement>` The image element to make croppable.
  `attrs <Object>` Object liternal containing configuration parameters.

### Properties

#### _active - `private Boolean`

Flag to determine if the crop region is active

#### _image - `private String`

The url of the image we are cropping

#### _instances - `private static Object`

Internal hash table for all ImageCropper instances

#### _mask - `private HTMLElement`

The HTML Element created to "mask" the image being cropped

#### _resize - `private Object`

A reference to the Resize Utility used in this Cropper Instance

#### _resizeEl - `private HTMLElement`

The HTML Element used to create the Resize Oject

#### _resizeMaskEl - `private HTMLElement`

The HTML Element used to create the Resize mask

#### _wrap - `private HTMLElement`

The HTML Element created to wrap the image

#### CSS_MAIN - `private String`

The CSS class used to wrap the element

#### CSS_MASK - `private String`

The CSS class for the mask element

#### CSS_RESIZE_MASK - `private String`

The CSS class for the mask inside the resize element

#### Properties inherited from YAHOO.util.Element:

`DOM_EVENTS`

#### Properties inherited from YAHOO.util.AttributeProvider:

`_configs`

#### Properties inherited from YAHOO.util.EventProvider:

`__yui_events, __yui_subscribers`

### Methods

#### _createMask

`private void _createMask ( )`
Creates the mask element used to mask the image

#### _createResize

`private void _createResize ( )`
Creates the resize element and the instance of the Resize Utility

#### _createWrap

`private void _createWrap ( )`
Creates the wrapper element used to wrap the image

#### _handleB4DragEvent

`private void _handleB4DragEvent ( )`
Handles the DragDrop b4DragEvent event

#### _handleBeforeResizeEvent

`private void _handleBeforeResizeEvent ( )`
Handles the Resize Utilitys beforeResize event

#### _handleDragEvent

`private void _handleDragEvent ( )`
Handles the DragDrop DragEvent event

#### _handleEndResizeEvent

`private void _handleEndResizeEvent ( )`
Handles the Resize Utilitys endResize event

#### _handleKeyPress

`private void _handleKeyPress ( )`
Handles the keypress event

#### _handleMouseOut

`private void _handleMouseOut ( )`
Handles the mouseout event

#### _handleMouseOver

`private void _handleMouseOver ( )`
Handles the mouseover event

#### _handleResizeEvent

`private void _handleResizeEvent ( Event )`
Handles the Resize Utilitys Resize event

Parameters:
  `Event <object>` ev The Resize Utilitys resize event.

#### _handleResizeMaskEl

`private void _handleResizeMaskEl ( )`
Resizes the inner mask element

#### _handleStartResizeEvent

`private void _handleStartResizeEvent ( )`
Handles the Resize Utilitys startResize event

#### _moveEl

`private void _moveEl ( )`
Moves the resize element based on the arrow keys

#### _setBackgroundImage

`private void _setBackgroundImage ( String )`
Sets the background image of the resize element

Parameters:
  `String <object>` url The url of the image

#### _setBackgroundPosition

`private void _setBackgroundPosition ( Number )`
Sets the background image position to the top and left position

Parameters:
  `Number <object>` l The left position
  `Number <object>` t The top position

#### _setConstraints

`private Object _setConstraints ( Boolean )`
Set the DragDrop constraints to keep the element inside the crop area.

Parameters:
  `Boolean <object>` inside Used when called from inside a resize event, false by default (dragging)

Returns: `Object`
  Object containing Top, Right, Bottom and Left constraints

#### _syncBackgroundPosition

`private void _syncBackgroundPosition ( )`
Syncs the packground position of the resize element with the resize elements top and left style position

#### destroy

`void destroy ( )`
Destroys the ImageCropper object and all of it's elements & listeners.

#### getCropCoords

`Object getCropCoords ( )`
Returns the coordinates needed to crop the image

Returns: `Object`
  The top, left, height, width and image url of the image being cropped

#### getCropperById

`static Object getCropperById ( )`
Get's an ImageCropper object by the HTML id of the image associated with the ImageCropper object.

Returns: `Object`
  The ImageCropper Object

#### getEl

`HTMLElement getEl ( )`
Get the HTML reference for the image element.

Returns: `HTMLElement`
  The image element

#### getMaskEl

`HTMLElement getMaskEl ( )`
Get the HTML reference for the mask element.

Returns: `HTMLElement`
  The mask element

#### getResizeEl

`HTMLElement getResizeEl ( )`
Get the HTML reference for the resize element.

Returns: `HTMLElement`
  The resize element

#### getResizeMaskEl

`HTMLElement getResizeMaskEl ( )`
Get the HTML reference for the resizable object's mask element.

Returns: `HTMLElement`
  The resize objects mask element.

#### getResizeObject

`YAHOO.util.Resize getResizeObject ( )`
Get the Resize Utility object.

Returns: `YAHOO.util.Resize`
  The Resize instance

#### getWrapEl

`HTMLElement getWrapEl ( )`
Get the HTML reference for the wrap element.

Returns: `HTMLElement`
  The wrap element

#### init

`private void init ( )`
The ImageCropper class's initialization method

#### initAttributes

`private void initAttributes ( attr )`
Initializes all of the configuration attributes used to create a croppable element.

Parameters:
  `attr <Object>` Object literal specifying a set of configuration attributes used to create the widget.

#### reset

`YAHOO.widget.ImageCropper reset ( )`
Resets the crop element back to it's original position

Returns: `YAHOO.widget.ImageCropper`
  The ImageCropper instance

#### toString

`String toString ( )`
Returns a string representing the ImageCropper Object.

#### Methods inherited from YAHOO.util.Element:

`_setHTMLAttrConfig, addClass, addListener, appendChild, appendTo, delegate, fireQueue, getElementsByClassName, getElementsByTagName, getStyle, hasChildNodes, hasClass, initAttributes, insertBefore, on, removeChild, removeClass, removeDelegate, removeListener, replaceChild, replaceClass, setStyle, subscribe`

#### Methods inherited from YAHOO.util.AttributeProvider:

`configureAttribute, fireBeforeChangeEvent, fireChangeEvent, get, getAttributeConfig, getAttributeKeys, refresh, register, resetAttributeConfig, resetValue, set, setAttributeConfig, setAttributes`

#### Methods inherited from YAHOO.util.EventProvider:

`createEvent, fireEvent, hasEvent, subscribe, unsubscribe, unsubscribeAll`

### Events

#### beforeInitHeightChange

`beforeInitHeightChange ( event )`
Fires before the value for the configuration attribute 'initHeight' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeInitialXYChange

`beforeInitialXYChange ( event )`
Fires before the value for the configuration attribute 'initialXY' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeInitWidthChange

`beforeInitWidthChange ( event )`
Fires before the value for the configuration attribute 'initWidth' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeKeyTickChange

`beforeKeyTickChange ( event )`
Fires before the value for the configuration attribute 'keyTick' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeMinHeightChange

`beforeMinHeightChange ( event )`
Fires before the value for the configuration attribute 'minHeight' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeMinWidthChange

`beforeMinWidthChange ( event )`
Fires before the value for the configuration attribute 'minWidth' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeRatioChange

`beforeRatioChange ( event )`
Fires before the value for the configuration attribute 'ratio' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeShiftKeyTickChange

`beforeShiftKeyTickChange ( event )`
Fires before the value for the configuration attribute 'shiftKeyTick' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeStatusChange

`beforeStatusChange ( event )`
Fires before the value for the configuration attribute 'status' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### beforeUseKeysChange

`beforeUseKeysChange ( event )`
Fires before the value for the configuration attribute 'useKeys' changes. Return false to cancel the attribute change.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### dragEvent

`dragEvent ( )`
Fires when the DragDrop dragEvent

#### initHeightChange

`initHeightChange ( event )`
Fires when the value for the configuration attribute 'initHeight' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### initialXYChange

`initialXYChange ( event )`
Fires when the value for the configuration attribute 'initialXY' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### initWidthChange

`initWidthChange ( event )`
Fires when the value for the configuration attribute 'initWidth' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### keyTickChange

`keyTickChange ( event )`
Fires when the value for the configuration attribute 'keyTick' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### minHeightChange

`minHeightChange ( event )`
Fires when the value for the configuration attribute 'minHeight' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### minWidthChange

`minWidthChange ( event )`
Fires when the value for the configuration attribute 'minWidth' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### moveEvent

`moveEvent ( )`
Fires on every element move. Inside these methods: _handleKeyPress, _handleDragEvent, _handleResizeEvent

#### ratioChange

`ratioChange ( event )`
Fires when the value for the configuration attribute 'ratio' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### resizeEvent

`resizeEvent ( )`
Fires on every element resize.

#### shiftKeyTickChange

`shiftKeyTickChange ( event )`
Fires when the value for the configuration attribute 'shiftKeyTick' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### startResizeEvent

`startResizeEvent ( )`
Fires when when a resize action is started.

#### statusChange

`statusChange ( event )`
Fires when the value for the configuration attribute 'status' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### useKeysChange

`useKeysChange ( event )`
Fires when the value for the configuration attribute 'useKeys' changes.

Parameters:
  `event <{oldValue: any, newValue: any}>` An object containing the previous attribute value and the new value.

#### Events inherited from YAHOO.util.Element:

`appendTo, available, beforeAppendTo, beforeElementChange, contentReady, elementChange,`

### Configuration Attributes

#### initHeight `- Number`

Set the initlal height of the crop area, defaults to 1/4 of the image height

#### initialXY `- Array`

Array of the XY position that we need to set the crop element to when we build it. Defaults to [10, 10]

#### initWidth `- Number`

Set the initlal width of the crop area, defaults to 1/4 of the image width

#### keyTick `- Number`

The pixel tick for the arrow keys, defaults to 1

#### minHeight `- Number`

MinHeight of the crop area, default 50

#### minWidth `- Number`

MinWidth of the crop area, default 50.

#### ratio `- Boolean`

Set the ratio config option of the Resize Utlility, default false

#### shiftKeyTick `- Number`

The pixel tick for shift + the arrow keys, defaults to 10

#### status `- Boolean`

Show the Resize Utility status, defaults to true

#### useKeys `- Boolean`

Should we use the Arrow keys to position the crop element, defaults to true

#### Configuration attributes inherited from YAHOO.util.Element:

`element`

Copyright © 2010 Yahoo! Inc. All rights reserved.