jQuery插件imgAreaSelect图片裁剪使用详解.docx

jQuery插件imgAreaSelect图片裁剪使用详解目录(?)-1. 介绍2. 基本用法3. 选项4.5. 样式表6. 元素与类7.8. 回调函数9. 键盘支持10. API方法11. 二简单实例1. 宽度或者高度限制2. 固定高宽比3. 设置初始选项区域12. 三回调函数示例1. 选区预览2. 提交选区的坐标、介绍ImgAreaSelect是一jQuery插件，它支持用户通过鼠标拖曳选择图片的一部分，非常的fashion。另外，可以在这个选择图像区域的基础上应用网站的其他一些技术，比如图片拖曳、图片编辑等。、基本用法这个插件基于jQuery上通过imgAreaSelect()方法来调用，它操作的对象是HTML中元素内的图像。代码如下:javascriptview plaincopyprint?1. 2. $(document).ready(function()3. $(img#photo).imgAreaSelect(4. handles:true,5. onSelectEnd:someFunction6. );7. );8. 如果在jQuery对象里有不止有一个img元素，那么这个插件会对里面的元素逐个应用此方法。其实这个方法不仅仅应用于img元素，它支持任何块级元素（比如有图像背景的div元素）。与其它jQuery插件相似，这个插件可以在$(document).ready() 或者 $(window).load()句柄中初始化。、选项用户在这个插件的很多方面都可以进行定制，用户通过插件选项来达到这个目的（这些选项会在插件初始化的时候起效）。这些选项包括：选项描述aspectRatio长宽比，以后在选择时候就会维持不变。e.g. 4:3autoHide如果设为true，那么在选择完后区域会消失。Default:falseclassPrefix预先给插件元素的前缀（详见下面：、元素与类）Default:imgareaselectdisable如果设置成true，这个插件将不起作用（但是图像还是可见的）enable如果设置成true，这个插件又将重新起作用fadeSpeed若设置成大于零的某个数，将渐隐/渐现这个插件Default:truehandles若设置成true，在改变大小的时候显示改变框（就是角点有些小矩形）Default:falsehide若设置成true，则隐藏选择框imageHeight图像的真实高度（因为有可能被CSS缩放过了）imageWidth图像的真实宽度（因为有可能被CSS绽放过了）instance若设为true，imgAreaSelect()函数会返回一个对选择区域图像的一个引用，以便能够进一步使用API。（详见、API方法）keys启用/关闭键盘支持（详见、键盘支持）Default:falsemaxHeight限制选择框（以像素为单位），设置最大、最小的高度、宽度。maxWidthminHeightminWidthmovable设置是否支持选择框移动Default:trueparent指定此插件默认所附加到的父元素Default:bodypersistent若设置成true，点击选择区域外将开始一个新的选项（换言之，是否让用户只能移动/缩放选择区域）Default:falseremove若设置成true，则该插件将完全移除resizable决定选择区域是否可以改变大小Default:trueresizeMargin当选择区域宽度超过多少像素时将启用可改变大小模式show如果设置成true，选择区域将可见x1y1初始化时选择框左上角的坐标x2y2初始化时选择框右下角的坐标zIndex设置此插件所作用元素的z-index的值，一般情况下，imgAreaSelect 总是可以自动计算出它的值，但是极少数情况下还是有必要设置的。onInit当插件初始化时所调用的函数（详见、回调函数）onSelectStart当开始选择时所调用的函数（详见、回调函数）onSelectChange当改变选择区域时所调用的函数（详见、回调函数）onSelectEnd当选择结束时所调用的函数（详见、回调函数）、样式表随着插件发放的还有三个样式表：imgareaselect-default.css 这是默认的样式表,imgareaselect-animated.css 这个样式与默认的样式表基本是一样的，只是它能够让选择区域边框变化imgareaselect-deprecated.css 只有你想使用不赞同的选项时才用这个样式表。你只需要在html头部将其中的一个样式表添加进来就可以。这css文件夹中还包含张gif图片，它们是用来显示边框的。、元素与类此插件通过创建几个div元素来表示选择区域，包括边框、可调整手柄以及未选择的区域。这些元素已经指定了特定的类名了，所以你可以通过CSS或者jQuery选择器来获得并操作它们。类名指定给的对象imgareaselect-selection选择的区域imgareaselect-border1imgareaselect-border2imgareaselect-border3imgareaselect-border4选择区域的四个边框，由四个div组成的imgareaselect-handle可改变大小的调整手柄（四个或者八个divs，如果没有使能的话，则不显示）imgareaselect-outer未选择区域，由四个divs组成下面的对象示意图展示了这插件的这些元素如何布置的：其中的前缀imgareaselect是默认的前缀，可以通过classPrefix选项来修改。这在当有许多选择框需要分别操作（比如修改样式）的时候特别有用。、回调函数回调函数（当设置onInit, onSelectStart, onSelectChange或 onSelectEnd选项）接收两个参数，第一个选项是这个插件所应用图像的引用，另外一个则是呈现当前选择的对象，这个对象有六个性质。性质描述x1y1选择区域左上角的坐标x2y2选择区域右下角的坐标width选择区域的宽度height选择区域的高度为了便于理解，下面给出当选择完后执行的回调函数的例子：javascriptview plaincopyprint?1. $(img#photo).imgAreaSelect(2. onSelectEnd:function(img,selection)3. alert(width:+selection.width+;height:+selection.height);4. 5. );、键盘支持如果选项keys设置为true,那么我们能够通过键盘上的按键进来选择框的移动。下面的键可以使用，默认的功能如下：按键动作方向键每次以10像素为单位移动选区Shift+方向键每次以像素为单位移动选区Ctrl+方向键每次以10像素为单位扩缩选区Ctrl+Shift+方向键每次以1像素为单位扩缩选区当然你也可以自己通过设置keys这个选项来覆盖默认键设置，对象有下面的属性：属性描述方向键设置方向键的功能Shift设置Shift键的功能Ctrl设置Ctrl键的功能Alt设置Alt键的功能每个属性通过设置数值（以像素为单位，数值要不小于），表明当按下此键时移动/改变大小多少像素，或者指定其值为string来指定它是resize模式。例如：javascriptview plaincopyprint?1. $(img#example).imgAreaSelect(2. keys:arrows:15,ctrl:5,shift:resize3. );这个例子里设置成方向键会移动选区15像素，按住Ctrl键会移动5像素，而按住Shift键时则切换到resize模式。如果不止一个图像，且自己修改了按键设置，那么只对一个图像会应用这个自定义设置。一般来说，当激活（用鼠标点击）某个图像时，这个图像就会使用自定义的按键设置。、API方法这个插件也提供了几个API方法扩展它的应用，并能够通过这些API方法跟其他web应用联合起来。为了使用这些方法，首先需要一个插件对象，可以调用imgAreaSelect()函数并让其选项instance设置为true来实现：var ias = $(#photo).imgAreaSelect(instance: true);现在就可以使用此对象来调用公共的方法了。例如，设置一个默认预定义的范围：ias.setSelection(50, 50, 150, 200, true);ias.setOptions( show: true );ias.update();只要当初始化完成，就可以使用这些API方法了。下面列出这些API方法：方法描述getOptionsgetOptions()返回当前选项的配置Returns:一个包含当前选项配置的对象（一般是JSON对象）setOptionssetOptions(newOptions)设置插件选项参数:newOptions 选项配置对象（一般是JSON对象）getSelectiongetSelection(noScale)获取当前的选区参数：noScale (可选) 如果设置为真，那么对于返回的选区不进行缩放操作。返回：选择区域里的对象setSelectionsetSelection(x1, y1, x2, y2, noScale)设置当前选择区域参数：x1 选择区域左上角X坐标y1 选择区域左上角Y坐标x2 选择区域右下角X坐标y2 选择区域右下角Y坐标noScale (可选) 若设为真，则不会对图像进行缩放注意：此方法只在插件内设置选择区域，并不会马上观察到选区的变化，如果需要立马显示更改后的区域，必须在使用setSelect()函数后就调用update()函数，且让show选项为true.cancelSelectioncancelSelection()取消当前的选择注意：这个方法会隐藏选择/未选择区域，所以不必调用update()函数。updateupdate(resetKeyPress)更新插件配置参数:resetKeyPress (可选) 如果设成false，此实例的按键将复位（即不可用）二、简单实例、宽度或者高度限制minWidth、minHeight、maxWidth以及maxHeight选项允许你设置选区的范围。在这个例子中，图像的最大范围将限制为200x150px。$(document).ready(function () $(#ladybug_ant).imgAreaSelect( maxWidth: 200, maxHeight: 150, handles: true ););、固定高宽比配置aspectRatio选项就可以了，这里将其设置成：$(document).ready(function () $(#bee).imgAreaSelect( aspectRatio: 4:3, handles: true ););、设置初始选项区域配置x1, y1, x2与 y2选项就可以了：$(document).ready(function () $(#duck).imgAreaSelect( x1: 120, y1: 90, x2: 280, y2: 210 ););三、回调函数示例、选区预览在下面的代码小片断里，onSelectChange()回调函数实现了选择区域预览的效果。官方源代码：/projects/imgareaselect/examples-callback.htmljavascriptview plaincopyprint?1. $(function()2. $(imgsrc= /uploads/allimg/01/150106094847750.jpgstyle=font-family:monospace;font-size:14px;white-space:pre-wrap;ferret.jpgstyle=position:relative;/)3. .css(4. float:left,5. position:relative,6. overflow:hidden,7. width:100px,8. height:100px9. )10. .insertAfter($(#ferret);11. 12. $(#ferret).imgAreaSelect(13. aspectRatio:1:1,14. onSelectChange:function(img,selection)15. varscaleX=100/(selection.width|1);16. varscaleY=100/(selection.height|1);17. $(#ferret+divimg).css(18. width:Math.round(scaleX*400)+px,19. height:Math.round(scaleY*300)+px,20. marginLeft:-+Math.round(scaleX*selection.x1)+px,21. marginTop:-+Math.round(scaleY*selection.y1)+px22. );23. 24. );25. );htmlview plaincopyprint?1. 2. ferret.jpgstyle=float:left;margin-right:10px;/3. 由于预览窗口是100x100px的，因此当截图窗口小于100px时，预览图会放大；当截图窗口大于100px时，预览图会缩小。需要说明的是，这里制作这种效果使用了一种技巧。最关键的一个是等比率缩放.它需要两个图片，第一图是原图，第二个图是选择区域后显示的图，用第一个图上的选择坐标+css控制产生第二个图，实际上两个图是一样的，只不过通过css控制了第二张图的显示区域与缩放比率。证据如下：【证据一】在$(document).ready()函数中通过insertAfter插入src也是ferret.jpg的图片。再注意一下，这一段里的overflow: hidden,这一行代码就是让超过100px高宽的图片额外内容隐藏掉。【证据二】在preview()函数中，首先就定义了scaleX与scaleY，它们的内容