使用imgareaselect这个插件:
调用方式:
- $(document).ready(function () {
- $('img#photo').imgAreaSelect({
- handles: true,
- onSelectEnd: someFunction
- });
- });
如果 jQuery 对象中有多个元素,将为所有元素启用该插件。imgAreaSelect也适用于非图像元素,以及任何块元素(例如,<div>有背景图片); 您可以在 $(document).ready() 或 $(window).load() 事件处理程序初始化插件
options参数
参数名 | 数据类型 | 默认值 | 描述 |
---|---|---|---|
aspectRatio | string | 设定选取区域的显示比率,如:”4:3″ | |
autoHide | boolean | false | 如果设置为true,当选择区域选择结束时消失; |
classPrefix | string | ”imgareaselect” | 这是一个字符串,表示插件样式的类名加前缀 |
disable | boolean | 如果设置为true,禁用插件 | |
enable | boolean | 如果设置为true,插件被重新启用 | |
fadeSpeed | boolean | false | 如果设置为大于零的数字,则用优美的淡入/淡出动画来显示图片, |
handles | boolean | false | 如果设置为true,调整手柄则会显示在选择区域内,如果设置为”corners”,则只有角处理会显示调整手柄 |
hide | boolean | 如果设置为true,选择范围是隐藏 | |
imageHeight | number | 图片的真实高度 (if scaled with the CSS width and height properties) | |
imageWidth | number | 真实图片宽度 (if scaled with the CSS width and height properties) | |
instance | number | 如果设置为true,imgAreaSelect() 调用返回一个imgAreaSelect绑定到的图像的实例,使您可以使用它的API方法 | |
keys | boolean | false | 启用/禁用键盘支持,默认值为false |
maxHeight | number | 选取的最大高度(单位为像素) | |
maxWidth | number | 选取的最大宽度(单位为像素) | |
minHeight | number | 选取的最小高度(单位为像素) | |
minWidth | number | 选取的最小宽度(单位为像素) | |
movable | boolean | true | 确定选取是否可以移动 |
parent | string | “body” | 一个jQuery对象或选择字符串,指定被追加到父元素,默认值为”body” |
persistent | boolean | false | 如果设置为true,选择区以外的点击将不会启动一个新的选区(即用户将只能移动/调整现有的选择范围),默认值为false |
resizable | boolean | true | 确定是否选择面积应可调整大小 |
show | boolean | 如果设置为true,选区则会显示 | |
x1 y1 | 最初选择区域的左上角坐标 | ||
x2 y2 | 最初选择区域的右上角坐标 | ||
zIndex | 插件元素的z-index值,正常情况下imgAreaSelect会自动分配,但有少数情况,有必要将其设置为制定值 | ||
onInit | function | 插件初始化时的回调函数 | |
onSelectStart | function | 插件开始选择时的回调函数 | |
onSelectChange | function | 插件改变选区时的回调函数 | |
onSelectEnd | function | 弹窗显示前的回调函数 |
Callback 函数
回调函数 (参见onInit、 onSelectStart、 onSelectChange 和 onSelectEnd 参数) 传递两个参数。第一个参数是插件所附加到的图像的引用,第二参数是一个对象,表示当前选定内容。对象有六个属性:
属性 | 描述 |
---|---|
x1 y1 | 所选区域的左上角的坐标 |
x2 y2 | 选定区域右下角的坐标 |
width | 选择宽度 |
height | 选择高度 |
下面是一个示例将选择结束后执行的回调函数
- $('img#photo').imgAreaSelect({
- onSelectEnd: function (img, selection) {
- alert('width: ' + selection.width + '; height: ' + selection.height);
- }
- });
键盘支持
如果keys 参数设置为 true,选择区域可以使用键盘移动/调整。默认情况下,使用下面的键
属性 | 描述 |
---|---|
方向键 | 将选区移动 10 个像素 |
Shift + 方向键 | 将选区移动 1个像素 |
Ctrl + 方向键 | 将选择区域调整 10 个像素的大小 |
Shift + Ctrl + 方向键 | 将选择区域调整 1 个像素的大小 |
您可以通过将键值对设置一个对象覆盖上面的默认键值的绑定。该对象可能有以下属性
属性 | 描述 |
---|---|
arrows | 定义方向键的行为 |
shift | 定义 Shift 键的行为 |
ctrl | 定义 Ctrl 键的行为 |
alt | 定义 Alt 键的行为 |
每个属性可以设置为像素 (≥ 1) 的选择区域,当特定键被按下时应该移动/调整大小数,或者"resize"字符串,指示密钥应该切换到调整大小模式的字符串。示例:
- $('img#example').imgAreaSelect({
- keys: { arrows: 15, ctrl: 5, shift: 'resize' }
- });
使用这些设置,按箭头键仅将选择区域通过移动 15 像素,按 Ctrl 键将移动修改区域大小为 5 个像素,按住 shift 键将切换到调整大小。
如果有多个imgAreaSelect实例的页面有初始化的键选项,在任何时刻只有一实例可以控制键盘。默认情况下,任何用户操作 (选择区调整大小或移动) 或 reinvocation 插件实例上的 imgAreaSelect() 方法使键盘控制一个。
API 方法
为了简化扩展插件,并将它与其他 web 应用程序的组件集成提供了几个 API 方法。
为了使用这些方法,您需要插件的对象实例。若要获取之一,调用 imgAreaSelect() 方法, 将instance选项设置为 true;
- var ias = $('#photo').imgAreaSelect({ instance: true });
现在,您可以使用此对象调用公共方法。例如,要设置的预定义的选择区域
- ias.setSelection(50, 50, 150, 200, true);
- ias.setOptions({ show: true });
- ias.update();
请注意,您应该只有在该实例完全初始化后使用,即在 onInit 回调函数,或已触发后随时 onInit。
可使用以下方法:
方法名 | 描述 |
---|---|
getOptions | getOptions() 获取当参数 返回: |
setOptions | setOptions(newOptions) 设置参数 参数: |
getSelection | getSelection([noScale]) 获取当前所选内容 参数: 返回: |
setSelection | setSelection(x1, y1, x2, y2, [noScale]) 设置当前所选内容 参数:
注意: 此方法仅插件实例中设置选定内容的内部表示形式, 它不会更新可视化界面。 如果您想要显示的新选择,可以在setSelection() 后调用 update() 。 还要确保 theshow 选项被设置为 true。.
|
cancelSelection | cancelSelection() 取消当前选定内容
注意: 此方法隐藏选择/外部区域。因此没有必要调用 update() (作为反对 tosetSelection())。
|
update | update([resetKeyPress]) 更新插件元素 参数: |