jQuery EasyUI 的截图插件（imgAreaSelect）用法

fuhao200866

浏览: 79007 次
性别:
来自: 北京

最近访客更多访客>>

bruce_ma

sxj0384

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery CSS JavaScript SNS .net

目前大多数的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>之间加入下面的代码：

然后调用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 CSS`width`and`height`properties)
`imageWidth`	真实图片宽度 (if scaled with the CSS`width`and`height`properties)
`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

分享到：

类似QQ窗口的抖动效果 | css在IE6中的bug集合

2011-02-18 17:06
浏览 2053
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论