jquery imgareaselect 插件中文文档

关于 imgareaselect 插件

imgareaselect 是一个 允许用户使用简单、直观的点击、拖动界面图像选择矩形区域的jQuery插件。该插件可用于 web 应用程序中轻松实现图像裁剪功能,以及其他功能,如照片标记、 图像编辑功能,等等。

Download file

使用demo

尝试一下下面各种效果:

点击查看demo


使用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)

设置参数

参数:
newOptions – 新的参数对象

getSelection   getSelection([noScale])

获取当前所选内容

参数:
noScale (optional) – 如果设置为 true,缩放不会应用于返回的选择

返回:
选择对象

setSelection setSelection(x1, y1, x2, y2, [noScale])

设置当前所选内容

参数:
x1 – 选择区域的左上角顶部 X 坐标
y1 – 选择区域的左上角的 Y 坐标
x2 – 选择区域的右下角的 x 坐标
y2 – 选择区域右下角的 Y 坐标
noScale (optional) – 如果设置为 true,缩放不会应用于新的选择

注意: 此方法仅插件实例中设置选定内容的内部表示形式, 它不会更新可视化界面。 如果您想要显示的新选择,可以在setSelection() 后调用 update() 。 还要确保 theshow 选项被设置为 true。.
cancelSelection cancelSelection()

取消当前选定内容

注意: 此方法隐藏选择/外部区域。因此没有必要调用 update() (作为反对 tosetSelection())。
update update([resetKeyPress])

更新插件元素

参数:
resetKeyPress (optional) – 如果设置为 false,此实例 keypress 事件处理程序没有激活

“jquery imgareaselect 插件中文文档”的27个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注