`
fuhao200866
  • 浏览: 75089 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

jQueryCSSJavaScriptSNS.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>之间加入下面的代码：

<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

分享到：
| css在IE6中的bug集合
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics