《jquery imgareaselect图片裁切插件使用的中文文档》由会员分享，可在线阅读，更多相关《jquery imgareaselect图片裁切插件使用的中文文档（8页珍藏版）》请在金锄头文库上搜索。
1、jquery imgareaselect 图片裁切插件 使用的中文文档调用方式:1. $(document).ready(function () 2. $(img#photo).imgAreaSelect( 3. handles: true, 4. onSelectEnd: someFunction 5. ); 6. );如果 jQuery 对象中有多个元素，将为所有元素启用该插件。imgAreaSelect 也适用于非图像元素，以及任何块元素（例如，有背景图片）；您可以在 $(document).ready() 或 $(window).load() 事件处理程序初始化插件optionsopt
2、ions 参数参数 参数名 数据类型 默认值 描述aspectRatio string 设定选取区域的显示比率，如：”4:3autoHide boolean false 如果设置为 true，当选择区域选择结束时消失；classPrefix string ”imgareaselect” 这是一个字符串，表示插件样式的类名加前缀disable boolean 如果设置为 true，禁用插件enable boolean如果设置为 true，插件被重新启用fadeSpeed boolean false 如果设置为大于零的数字，则用优美的淡入/淡出动画来显示图片，handles boolean fal
3、se 如果设置为 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() 调用返回一个 imgAr
4、eaSelect 绑定到的图像的实例， 使您可以使用它的 API 方法keys boolean false 启用/禁用键盘支持，默认值为 falsemaxHeight number 选取的最大高度（单位为像素）maxWidth number 选取的最大宽度（单位为像素）minHeightnumber 选取的最小高度（单位为像素）minWidth number 选取的最小宽度（单位为像素）movable boolean true 确定选取是否可以移动parent string “body” 一个 jQuery 对象或选择字符串，指定被追加到父元素，默认值为”body”persistent boo
5、lean false 如果设置为 true，选择区以外的点击将不会启动一个新的选区（即用户将只能移动/调整 现有的选择范围），默认值为 falseresizable boolean true 确定是否选择面积应可调整大小show boolean 如果设置为 true，选区则会显示x1 y1 最初选择区域的左上角坐标x2 y2 最初选择区域的右上角坐标zIndex 插件元素的 z-index 值，正常情况下 imgAreaSelect 会自动分配，但有少数情况，有必要 将其设置为制定值onInit function 插件初始化时的回调函数onSelectStart function 插件开始选择
6、时的回调函数onSelectChange function 插件改变选区时的回调函数onSelectEnd function 弹窗显示前的回调函数 CallbackCallback 函数函数 回调函数 （参见 onInit、 onSelectStart、 onSelectChange 和 onSelectEnd 参数）传递两个参数。第一个参数是插件所附加到的图像的引用，第二参数是一个对象，表示当前选定内容。对象有六个属性：属性 描述x1 y1 所选区域的左上角的坐标x2 y2 选定区域右下角的坐标width 选择宽度height 选择高度下面是一个示例将选择结束后执行的回调函数1. $(img
7、#photo).imgAreaSelect( 2. onSelectEnd: function (img, selection) 3. alert(width: + selection.width + ; height: + selection.height); 4. 5. );键盘支持键盘支持 如果 keys 参数设置为 true，选择区域可以使用键盘移动/调整。默认情况下，使用下面的键属性 描述方向键 将选区移动 10 个像素Shift + 方向键 将选区移动 1 个像素Ctrl + 方向键 将选择区域调整 10 个像素的大小Shift + Ctrl + 方向键 将选择区域调整 1 个像素
8、的大小您可以通过将键值对设置一个对象覆盖上面的默认键值的绑定。该对象可能有以下属性属性 描述arrows 定义方向键的行为shift 定义 Shift 键的行为ctrl 定义 Ctrl 键的行为alt 定义 Alt 键的行为每个属性可以设置为像素 ( 1） 的选择区域,当特定键被按下时应该移动/调整大小数，或者”resize”字符串，指示密钥应该切换到调整大小模式的字符串。示例：1. $(img#example).imgAreaSelect( 2. keys: arrows: 15, ctrl: 5, shift: resize 3. );使用这些设置，按箭头键仅将选择区域通过移动 15 像素
9、，按 Ctrl 键将移动修改区域大小为 5 个像素，按住 shift 键将切换到调整大小。如果有多个 imgAreaSelect 实例的页面有初始化的键选项,在任何时刻只有一实例可以控制键盘。默认情况下，任何用户操作 (选择区调整大小或移动） 或 reinvocation 插件实例上的 imgAreaSelect()方法使键盘控制一个。APIAPI 方法方法 为了简化扩展插件，并将它与其他 web 应用程序的组件集成提供了几个 API 方法。为了使用这些方法，您需要插件的对象实例。若要获取之一，调用 imgAreaSelect() 方法， 将 instance 选项设置为 true；1. va
10、r ias = $(#photo).imgAreaSelect( instance: true );现在，您可以使用此对象调用公共方法。例如，要设置的预定义的选择区域1. ias.setSelection(50, 50, 150, 200, true); 2. ias.setOptions( show: true ); 3. ias.update();请注意，您应该只有在该实例完全初始化后使用，即在 onInit 回调函数，或已触发后随时 onInit。可使用以下方法:方法名 描述getOptions getOptions() 获取当参数 返回返回: : 一个对象，包含当前使用中的参数setO
11、ptions setOptions(newOptions) 设置参数 参数参数: : newOptionsnewOptions 新的参数对象getSelection getSelection(noScale) 获取当前所选内容 参数参数: : noScalenoScale (optional) 如果设置为 true，缩放不会应用于返回的选择 返回返回: : 选择对象setSelection setSelection(x1, y1, x2, y2, noScale) 设置当前所选内容 参数参数: : x1x1 选择区域的左上角顶部 X 坐标 y1y1 选择区域的左上角的 Y 坐标 x2x2 选择
12、区域的右下角的 x 坐标 y2y2 选择区域右下角的 Y 坐标 noScalenoScale (optional) 如果设置为 true，缩放不会应用于新的选择 注意：注意： 此方法仅插件实例中设置选定内容的内部表示形式， 它不会更新可视化界面。 如 果您想要显示的新选择，可以在 setSelection() 后调用 update() 。 还要确保 theshow 选项被设置为 true。.cancelSelection cancelSelection() 取消当前选定内容 注意：注意： 此方法隐藏选择/外部区域。因此没有必要调用 update() （作为反对 tosetSelection()。update update(resetKeyPress) 更新插件元素 参数参数: : resetKeyPressresetKeyPress (optional) 如果设置为 false，此实例 keypress 事件处理程序没有 激活
