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

jQuery插件imgAreaSelect图片裁剪使用详解目录/lovesomnus/article/details\o 系统根据文章中H1到H6标签自动生成文章目录(?)/lovesomnus/article/details\o 收起[-]/lovesomnus/article/details\l t0介绍/lovesomnus/article/details\l t1基本用法/lovesomnus/article/details\l t2选项/lovesomnus/article/details\l t4样式表/lovesomnus/article/details\l t5元素与类/lovesomnus/article/details\l t7回调函数/lovesomnus/article/details\l t8键盘支持/lovesomnus/article/details\l t9API方法/lovesomnus/article/details\l t10二简单实例/lovesomnus/article/details\l t11宽度或者高度限制/lovesomnus/article/details\l t12固定高宽比/lovesomnus/article/details\l t13设置初始选项区域/lovesomnus/article/details\l t14三回调函数示例/lovesomnus/article/details\l t15选区预览/lovesomnus/article/details\l t16提交选区的坐标１、介绍ImgAreaSelect是一jQuery插件，它支持用户通过鼠标拖曳选择图片的一部分，非常的fashion。另外，可以在这个选择图像区域的基础上应用网站的其他一些技术，比如图片拖曳、图片编辑等。２、基本用法这个插件基于jQuery上通过imgAreaSelect()方法来调用，它操作的对象是HTML中img元素内的图像。代码如下:[javascript]?/lovesomnus/article/details\o view plainview plain/lovesomnus/article/details\o copycopy/lovesomnus/article/details\o printprint/lovesomnus/article/details\o ??/snippets/583377/forkscript?type=text/javascript?$(document).ready(function()?{???$(img#photo).imgAreaSelect({???handles:?true,???onSelectEnd:?someFunction???});??});??/script?如果在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图像的真实宽度（因