imgareaselect属性

1:简介

ImgAreaSelect是一个jQuery插件，让用户选择使用一个简单而直观的点击和拖动的界面形象的矩形区域。该插件可用于在Web应用程序轻松实现图像裁剪功能，以及其他功能，如照片标记，图像编辑功能等。

2:基本用法

该插件调用imgAreaSelect（）方法，它表示一个jQuery对象调用<IMG>元素：

<script type="text/javascript">
$(document).ready(function () {
    $('img#photo').imgAreaSelect({
        handles: true,
        onSelectEnd: someFunction
    });
});
</script>

如果有一个以上的元素的jQuery对象，插件将启用集合中的所有元素。这适用于非图像元素以及作为imgAreaSelect其实是可以与任何块元素（例如，使用 <DIV>与背景图像）。
You can initialize the plugin either in the $(document).ready() or $(window).load() event handler.

3:参数 描述
aspectRatio 设定选取区域的显示比率，如：”4:3“

autoHide 如果设置为true，当选择区域选择结束时消失，默认值为：false
classPrefix 这是一个字符串，表示插件样式的类名加前缀，默认值为"imgareaselect"
disable 如果设置为true，禁用插件
enable 如果设置为true，插件被重新启用
fadeSpeed 如果设置为大于零的数字，则用优美的淡入/淡出动画来显示图片，默认值为 false
handles 如果设置为true，调整手柄则会显示在选择区域内，如果设置为"corners"，则只有角处理会显示调整手柄，默认值为false
hide 如果设置为true，选择范围是隐藏
imageHeight 图片的真实高度 (if scaled with the CSSwidthandheightproperties)
imageWidth 真实图片宽度 (if scaled with the CSSwidthandheightproperties)
instance 如果设置为true，imgAreaSelect() 调用返回一个imgAreaSelect绑定到的图像的实例，使您可以使用它的API方法
keys 启用/禁用键盘支持，默认值为false
maxHeight 选取的最大高度（单位为像素）
maxWidth 选取的最大宽度（单位为像素）
minHeight 选取的最小高度（单位为像素）
minWidth 选取的最小宽度（单位为像素）
movable 确定选取是否可以移动，默认值为true

parent 一个jQuery对象或选择字符串，指定被追加到父元素，默认值为"body"

persistent 如果设置为true，选择区以外的点击将不会启动一个新的选区（即用户将只能移动/调整现有的选择范围），默认值为false
resizable 确定是否选择面积应可调整大小，默认值为true

show 如果设置为true，选区则会显示
x1
y1 最初选择区域的左上角坐标
x2
y2 最初选择区域的右上角坐标
zIndex 插件元素的z-index值，正常情况下imgAreaSelect会自动分配，但有少数情况，有必要将其设置为制定值
onInit 插件初始化时的回调函数
onSelectStart 插件开始选择时的回调函数
onSelectChange 插件改变选区时的回调函数

4:样式表

分布与插件三个样式表：

imgareaselect，是default.css -默认样式表，
imgareaselect - animated.css -相同imgareaselect，是default.css，但它使选择区域边界的动画，
imgareaselect deprecated.css -这个样式表应该只适用于如果你想使用已过时的样式选项 。
你只需要包含其中一个在你的页面标题。另外还有四个GIF文件中的CSS的分发包（文件夹边境h.gif，边境v.gif， 边境ANIM - h.gif和边境ANIM - v.gif）。这些文件是用于呈现选择区域的边界，并应在与样式表放在同一目录中。

5:回调函数

回调函数（与设定的OnInit， onSelectStart， onSelectChange和onSelectEnd选项）传递两个参数。第一个参数是指向该插件连接到图像引用，第二个是一个对象，表示当前选择。该对象有六个属性：

Property Description
x1
y1 coordinates of the top left corner of the selected area
x2
y2 coordinates of the bottom right corner of the selected area
width selection width
height selection height

$('img#photo').imgAreaSelect({
    onSelectEnd: function (img, selection) {
        alert('width: ' + selection.width + '; height: ' + selection.height);
    }
});

6:键盘支持

当密钥选项设置为 true ，选择区域可以移动/调整大小使用键盘。默认情况下，使用以下键：

Key Action
arrow keys move selection area by 10 pixels
Shift + arrow keys move selection area by 1 pixel
Ctrl + arrow keys resize selection area by 10 pixels
Shift + Ctrl + arrow keys resize selection area by 1 pixel
You can override these key bindings by setting the keys option to an object that defines the desired key settings. The object may have the following properties:

Property Description
arrows defines the behavior of the arrow keys
shift defines the behavior of the Shift key
ctrl defines the behavior of the Ctrl key
alt defines the behavior of the Alt key

$('img#example').imgAreaSelect({
    keys: { arrows: 15, ctrl: 5, shift: 'resize' }
});

翻译自：http://odyniec.net/projects/imgareaselect/usage.html