jQuery EasyUI 的截图插件（imgAreaSelect）用法
|
admin
2012年3月12日 9:43
本文热度 2882
|
目前大多数的SNS网站都有自定义头像的功能，而自定义头像又有很多种方法可以实现，比如说大多数网站都在使用Flash截图，还有就是 Javascript截图。而如果自己写一个Javascript截图功能的话比较复杂，而且对于浏览器的兼容也不是很好，jQuery就给我们提供了这 样的插件——imgAreaSelect
官方网站：http://odyniec.net/projects/imgareaselect/
这里介绍一下快速使用这个插件的方法：
首先在官方网站下载这个插件（http://odyniec.net/projects/imgareaselect/jquery.imgareaselect-0.9.1.zip），目前版本是0.9.1，在下载的插件中会有scripts 和CSS文件夹，scripts文件夹会包含jQuery文件和imgareaSelect文件，CSS文件夹则提供一些默认的样式和一些生动的样式，这个用户可以自己选择使用哪一种方式。
准备工作完成后，我们可以建立一个HTML 页面，在页面的<head>之间加入下面的代码：
<head>
…
<link rel=”stylesheet” type=”text/css” href=”css/imgareaselect-default.css” />
<script type=”text/javascript” src=”scripts/jquery.min.js”></script>
<script type=”text/javascript” src=”scripts/jquery.imgareaselect.pack.js”></script>
…
</head>
然后调用imgAreaSelect 方法来激活图片的选中区域
<script type=”text/javascript”>
$(document).ready(function () {
$(‘img#photo’).imgAreaSelect({ handles: true, onSelectEnd: someFunction });
});
</script>
imgAreaSelect 方法有很多参数可以定义：
参数 |
描述 |
|---|
aspectRatio |
设定选取区域的显示比率，如：”4:3“
|
autoHide |
如果设置为true，当选择区域选择结束时消失，默认值为：false |
classPrefix |
这是一个字符串，表示插件样式的类名加前缀，默认值为"imgareaselect" |
disable |
如果设置为true，禁用插件 |
enable |
如果设置为true，插件被重新启用 |
fadeSpeed |
如果设置为大于零的数字，则用优美的淡入/淡出动画来显示图片，默认值为 false |
handles |
如果设置为true，调整手柄则会显示在选择区域内，如果设置为"corners"，则只有角处理会显示调整手柄，默认值为false |
hide |
如果设置为true，选择范围是隐藏 |
imageHeight |
图片的真实高度 (if scaled with the CSSwidthandheightproperties) |
imageWidth |
真实图片宽度 (if scaled with the CSSwidthandheightproperties) |
instance |
如果设置为true，imgAreaSelect() 调用返回一个imgAreaSelect绑定到的图像的实例，使您可以使用它的API方法 |
keys |
启用/禁用键盘支持，默认值为false |
maxHeight |
选取的最大高度（单位为像素） |
maxWidth |
选取的最大宽度（单位为像素） |
minHeight |
选取的最小高度（单位为像素） |
minWidth |
选取的最小宽度（单位为像素） |
movable |
确定选取是否可以移动，默认值为true
|
parent |
一个jQuery对象或选择字符串，指定被追加到父元素，默认值为"body"
|
persistent |
如果设置为true，选择区以外的点击将不会启动一个新的选区（即用户将只能移动/调整现有的选择范围），默认值为false |
resizable |
确定是否选择面积应可调整大小，默认值为true
|
show |
如果设置为true，选区则会显示 |
x1
y1 |
最初选择区域的左上角坐标 |
x2
y2 |
最初选择区域的右上角坐标 |
zIndex |
插件元素的z-index值，正常情况下imgAreaSelect会自动分配，但有少数情况，有必要将其设置为制定值 |
onInit |
插件初始化时的回调函数 |
onSelectStart |
插件开始选择时的回调函数 |
onSelectChange |
插件改变选区时的回调函数 |
onSelectEnd |
插件结束选区时的回调函数 |
以上是翻译以后的描述，读者也可以浏览原始文档：
http://odyniec.net/projects/imgareaselect/usage.html
该文章在 2012/3/12 9:43:13 编辑过
400 186 1886
