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

最新推荐文章于 2021-03-17 05:52:21 发布

iteye_1525

最新推荐文章于 2021-03-17 05:52:21 发布

阅读量246

点赞数

分类专栏： jQuery 文章标签： jQuery CSS JavaScript SNS .net ViewUI

本文链接：https://blog.csdn.net/iteye_1525/article/details/82008207

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

目前大多数的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`	插件结束选区时的回调函数