[b]一、技术文档 １、介绍[/b] [url=http://www.1sucai.cn/jiaoben/31986.html]ImgAreaSelect[/url]是一jQuery插件，它支持用户通过鼠标拖曳选择图片的一部分，非常的fashion。另外，可以在这个选择图像区域的基础上应用网站的其他一些技术，比如图片拖曳、图片编辑等。 [b]２、基本用法[/b] 这个插件基于jQuery上通过imgAreaSelect()方法来调用，它操作的对象是HTML中<img>元素内的图像。 如果在jQuery对象里有不止有一个img元素，那么这个插件会对里面的元素逐个应用此方法。其实这个方法不仅仅应用于img元素，它支持任何块级元素（比如有图像背景的div元素）。 与其它jQuery插件相似，这个插件可以在$(document).ready() 或者 $(window).load()句柄中初始化。 [b]３、选项[/b] 用户在这个插件的很多方面都可以进行定制，用户通过插件选项来达到这个目的（这些选项会在插件初始化的时候起效）。这些选项包括：

[b]选项[/b]	[b]描述[/b]
[b]aspectRatio[/b]	[b]长宽比[/b]，以后在选择时候就会维持不变。 e.g. "[b]4:3[/b]"
[b]autoHide[/b]	如果设为true，那么在选择完后区域会消失。 [b]Default:false[/b]
[b]classPrefix[/b]	预先给插件元素的前缀（详见下面：５、元素与类） [b]Default:imgareaselect[/b]
[b]disable[/b]	如果设置成true，这个插件将不起作用（但是图像还是可见的）
[b]enable[/b]	如果设置成true，这个插件又将重新起作用
[b]fadeSpeed[/b]	若设置成大于零的某个数，将"渐隐/渐现"这个插件 Default:true
[b]handles[/b]	若设置成true，在改变大小的时候显示改变框（就是角点有些小"矩形"） [b]Default:false[/b]
[b]hide[/b]	若设置成true，则隐藏选择框
[b]imageHeight[/b]	图像的真实高度（因为有可能被CSS缩放过了）
[b]imageWidth[/b]	图像的真实宽度（因为有可能被CSS绽放过了）
[b]instance[/b]	若设为true，imgAreaSelect()函数会返回一个对选择区域图像的一个引用，以便能够进一步使用API。（详见８、API方法）
[b]keys[/b]	启用/关闭键盘支持（详见７、键盘支持） [b]Default:false[/b]
[b]maxHeight[/b]	限制选择框（以像素为单位），设置最大、最小的高度、宽度。
[b]maxWidth[/b]
[b]minHeight[/b]
[b]minWidth[/b]
[b]movable[/b]	设置是否支持选择框移动 [b]Default:true[/b]
[b]parent[/b]	指定此插件默认所附加到的父元素 [b]Default:body[/b]
[b]persistent[/b]	若设置成true，点击选择区域外将开始一个新的选项（换言之，是否让用户只能移动/缩放选择区域） [b]Default:false[/b]
[b]remove[/b]	若设置成true，则该插件将完全移除
[b]resizable[/b]	决定选择区域是否可以改变大小 [b]Default:true[/b]
[b]resizeMargin[/b]	当选择区域宽度超过多少像素时将启用"可改变大小"模式
[b]show[/b]	如果设置成true，选择区域将可见
[b]x1 [/b] [b]y1[/b]	初始化时选择框左上角的坐标
[b]x2 [/b] [b]y2[/b]	初始化时选择框右下角的坐标
[b]zIndex[/b]	设置此插件所作用元素的z-index的值，一般情况下，imgAreaSelect 总是可以自动计算出它的值，但是极少数情况下还是有必要设置的。
[b]onInit[/b]	当插件初始化时所调用的函数（详见６、回调函数）
[b]onSelectStart[/b]	当开始选择时所调用的函数（详见６、回调函数）
[b]onSelectChange[/b]	当改变选择区域时所调用的函数（详见６、回调函数）
[b]onSelectEnd[/b]	当选择结束时所调用的函数（详见６、回调函数）

[b]４、样式表[/b] 随着插件发放的还有三个样式表： imgareaselect-default.css – 这是默认的样式表, imgareaselect-animated.css – 这个样式与默认的样式表基本是一样的，只是它能够让选择区域边框变化 imgareaselect-deprecated.css – 只有你想使用不赞同的选项时才用这个样式表。 你只需要在html头部将其中的一个样式表添加进来就可以。这css文件夹中还包含４张gif图片，它们是用来显示边框的。 [b]５、元素与类[/b] 此插件通过创建几个div元素来表示选择区域，包括边框、可调整手柄以及未选择的区域。这些元素已经指定了特定的类名了，所以你可以通过CSS或者jQuery选择器来获得并操作它们。

[b]类名[/b]	[b]指定给的对象[/b]
[b]imgareaselect-selection[/b]	选择的区域
[b]imgareaselect-border1 imgareaselect-border2 imgareaselect-border3 imgareaselect-border4[/b]	选择区域的四个边框，由四个div组成的
[b]imgareaselect-handle[/b]	可改变大小的调整手柄（四个或者八个divs，如果没有使能的话，则不显示）
[b]imgareaselect-outer[/b]	未选择区域，由四个divs组成

下面的对象示意图展示了这插件的这些元素如何布置的： [img]http://files.jb51.net/upload/201110/20111008212937669.png[/img] 其中的前缀"imgareaselect"是默认的前缀，可以通过"[b]classPrefix[/b]"选项来修改。这在当有许多选择框需要分别操作（比如修改样式）的时候特别有用。 [h2]６、回调函数[/h2] 回调函数（当设置onInit, onSelectStart, onSelectChange或 onSelectEnd选项）接收两个参数，第一个选项是这个插件所应用图像的引用，另外一个则是呈现当前选择的对象，这个对象有六个性质。 为了便于理解，下面给出当选择完后执行的回调函数的例子： $('img#photo').imgAreaSelect({ onSelectEnd: function (img, selection) { alert('width: ' + selection.width + '; height: ' + selection.height); } }); [h2]７、键盘支持[/h2] 如果选项"keys"设置为true,那么我们能够通过键盘上的按键进来选择框的移动。下面的键可以使用，默认的功能如下： 当然你也可以自己通过设置"keys"这个选项来覆盖默认键设置，对象有下面的属性： 每个属性通过设置数值（以像素为单位，数值要不小于１），表明当按下此键时移动/改变大小多少像素，或者指定其值为"string"来指定它是"resize"模式。例如： $('img#example').imgAreaSelect({ keys: { arrows: 15, ctrl: 5, shift: 'resize' } }); 这个例子里设置成"方向键会移动选区15像素，按住Ctrl键会移动5像素，而按住Shift键时则切换到resize模式"。     如果不止一个图像，且自己修改了按键设置，那么只对一个图像会应用这个自定义设置。一般来说，当"激活"（用鼠标点击）某个图像时，这个图像就会使用自定义的按键设置。 [h2]８、API方法[/h2] 这个插件也提供了几个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方法：   [h1]二、简单实例[/h1] [h2]１、宽度或者高度限制[/h2] minWidth、minHeight、maxWidth以及maxHeight选项允许你设置选区的范围。在这个例子中，图像的最大范围将限制为200x150px。 $(document).ready(function () { $('#ladybug_ant').imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true }); }); [h2]２、固定高宽比[/h2] 配置aspectRatio选项就可以了，这里将其设置成"４：３"： $(document).ready(function () { $('#bee').imgAreaSelect({ aspectRatio: '4:3', handles: true }); }); [h2]３、设置初始选项区域[/h2] 配置x1, y1, x2与 y2选项就可以了： $(document).ready(function () { $('#duck').imgAreaSelect({ x1: 120, y1: 90, x2: 280, y2: 210 }); }); [h1]三、回调函数示例[/h1] [h2]１、选区预览[/h2] 在下面的代码小片断里，onSelectChange()回调函数实现了选择区域预览的效果。 官方源代码：http://odyniec.net/projects/imgareaselect/examples-callback.html function preview(img, selection) { var scaleX = 100 / (selection.width || 1); var scaleY = 100 / (selection.height || 1);   $('#ferret + div > img').css({ width: Math.round(scaleX * 400) + 'px', height: Math.round(scaleY * 300) + 'px', marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' }); }   //这里通过jQuery语法在原来图片后插入同样的图片 $(document).ready(function () { $('<div><img src="ferret.jpg" style="position: relative;" /><div>') .css({ float: 'left', position: 'relative', [b]overflow: 'hidden', [/b] width: '100px', height: '100px' }) .[b]insertAfter[/b]($('#ferret'));   $('#ferret').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }); }); 由于预览窗口是100x100px的，因此当截图窗口小于100px时，预览图会放大；当截图窗口大于100px时，预览图会缩小。这两种效果图如下： [img]http://files.jb51.net/upload/201110/20111008212937704.png[/img] 截图 1　当截图窗口大于100px时 [img]http://files.jb51.net/upload/201110/20111008212938487.png[/img] 截图 2　当截图窗口小于100px时 需要说明的是，这里制作这种效果使用了一种技巧。最关键的一个是[b]等比率缩放.[/b]它需要两个图片，第一图是原图，第二个图是选择区域后显示的图，用第一个图上的选择坐标+css控制产生第二个图，实际上两个图是一样的，只不过通过css控制了第二张图的显示区域与缩放比率。证据如下： 【证据一】在$(document).ready()函数中通过insertAfter插入"src"也是"ferret.jpg"的图片。再注意一下，这一段里的"overflow: 'hidden',"这一行代码就是让超过100px高宽的图片额外内容隐藏掉。 【证据二】在preview()函数中，首先就定义了scaleX与scaleY，它们的内容就是100/selection.width(或height) ，也就是当selection.width小于100时，这个因子起放大作用，反之起缩小作用。 值得注意的是： [b]回调函数中实际图的宽高（这里的300,400是实际图的高，要根据实际情况调整！）,回调函数中新图的宽高这些参数必须设置正确、否则会出现 选择偏差 [/b] [h2]２、提交选区的坐标[/h2] 如果需要实现真正截图功能必须使用服务器端支持，例如php asp aspx jsp。也就是意味着，在客户端选择只是第一步，如果需进一步的处理，必须要将这选区的坐标提交给服务器。那么如何实现呢？ 创建一个表彰，里面有四个隐藏域： <form action="crop.php" method="post"> <input type="hidden" name="x1" value="" /> <input type="hidden" name="y1" value="" /> <input type="hidden" name="x2" value="" /> <input type="hidden" name="y2" value="" /> <input type="submit" name="submit" value="Submit" /> </form> 然后在初始化imgAreaSelect时，使用onSelectEnd()回调函数将选择后的数据赋给这些隐藏域，正如下面代码那样： $(document).ready(function () { $('#ladybug').imgAreaSelect({ onSelectEnd: function (img, selection) { $('input[name="x1"]').val(selection.x1); $('input[name="y1"]').val(selection.y1); $('input[name="x2"]').val(selection.x2); $('input[name="y2"]').val(selection.y2); [i][/i] [i]}[/i] }); }); 这样当点击"submit按钮"时，页面将上载到服务器，如果使用PHP的话，使用$_POST['x1']等就得到相应的坐标数据了。