关于ImgAreaSelect,  是一jQuery插件，它支持用户通过鼠标拖曳选择图片的一部分，如图片拖曳、图片编辑等~~来具体看一下

1、先下载imgAreaSelect插件

下载地址：

英文：http://odyniec.net/projects/imgareaselect/

中文：http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html

在头部引用：

<link rel="stylesheet" type="text/css" href="../jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" rel="external nofollow" /> <br><script type="text/javascript" src="../jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script>

2、下载的插件里有三个样式表

imgareaselect-default.css – 这是默认的样式表,

imgareaselect-animated.css – 这个样式与默认的样式表基本是一样的，只是它能够让选择区域边框变化

imgareaselect-deprecated.css – 只有你想使用不赞同的选项时才用这个样式表。

你只需要在html头部将其中的一个样式表添加进来就可以。这css文件夹中还包含４张gif图片，它们是用来显示边框的。

3、元素分布如图所示

此插件通过创建几个div元素来表示选择区域，包括边框、可调整手柄以及未选择的区域。这些元素已经指定了特定的类名了，所以你可以通过CSS或者jQuery选择器来获得并操作它们。

其中的前缀"imgareaselect"是默认的前缀，可以通过"classPrefix"选项来修改。这在当有许多选择框需要分别操作（比如修改样式）的时候特别有用。

 4、选项

用户在这个插件的很多方面都可以进行定制，用户通过插件选项来达到这个目的（这些选项会在插件初始化的时候起效）。这些选项包括：

5、回调函数

回调函数（当设置onInit, onSelectStart, onSelectChange或 onSelectEnd选项）接收两个参数，第一个选项是这个插件所应用图像的引用，另外一个则是呈现当前选择的对象，这个对象有六个性质。

为了便于理解，下面给出当选择完后执行的回调函数的例子：

$('img#photo').imgAreaSelect({
onSelectEnd: function (img, selection) {
alert('width: ' + selection.width + '; height: ' + selection.height);
}
});

6、键盘支持

如果选项"keys"设置为true,那么我们能够通过键盘上的按键进来选择框的移动。下面的键可以使用，默认的功能如下：

每个属性通过设置数值（以像素为单位，数值要不小于１），表明当按下此键时移动/改变大小多少像素，或者指定其值为"string"来指定它是"resize"模式。例如：

$('img#example').imgAreaSelect({
keys: { arrows: 15, ctrl: 5, shift: 'resize' }
});

这个例子里设置成"方向键会移动选区15像素，按住Ctrl键会移动5像素，而按住Shift键时则切换到resize模式"。

    如果不止一个图像，且自己修改了按键设置，那么只对一个图像会应用这个自定义设置。一般来说，当"激活"（用鼠标点击）某个图像时，这个图像就会使用自定义的按键设置。

7、API方法

这个插件也提供了几个API方法扩展它的应用，并能够通过这些API方法跟其他web应用联合起来。

为了使用这些方法，首先需要一个插件对象，可以调用imgAreaSelect()函数并让其选项"instance"设置为true来实现：

var ias = $('#photo').imgAreaSelect({ instance: true });

现在就可以使用此对象来调用公共的方法了。例如，设置一个默认预定义的范围：

ias.setSelection(50, 50, 150, 200, true);
ias.setOptions({ show: true });
ias.update();

只要当初始化完成，就可以使用这些API方法了。下面列出这些API方法：

二、简单实例

１、宽度或者高度限制

minWidth、minHeight、maxWidth以及maxHeight选项允许你设置选区的范围。在这个例子中，图像的最大范围将限制为200x150px。

$(document).ready(function () {
$('#ladybug_ant').imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true });
});

２、固定高宽比

配置aspectRatio选项就可以了，这里将其设置成"４：３"：

$(document).ready(function () {
$('#bee').imgAreaSelect({ aspectRatio: '4:3', handles: true });
});

３、设置初始选项区域

配置x1, y1, x2与 y2选项就可以了：

$(document).ready(function () {
$('#duck').imgAreaSelect({ x1: 120, y1: 90, x2: 280, y2: 210 });
});

三、回调函数示例

１、选区预览

在下面的代码小片断里，onSelectChange()回调函数实现了选择区域预览的效果。

官方源代码：http://odyniec.net/projects/imgareaselect/examples-callback.html

function preview(img, selection) {
var scaleX = 100 / (selection.width || 1);
var scaleY = 100 / (selection.height || 1);
$('#ferret + div > img').css({
width: Math.round(scaleX * 400) + 'px',
height: Math.round(scaleY * 300) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
//这里通过jQuery语法在原来图片后插入同样的图片
$(document).ready(function () {
$('<div><img src="ferret.jpg" style="position: relative;" /><div>')
.css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px'
})
.insertAfter($('#ferret'));
$('#ferret').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});

由于预览窗口是100x100px的，因此当截图窗口小于100px时，预览图会放大；当截图窗口大于100px时，预览图会缩小。这两种效果图如下：

截图 1　当截图窗口大于100px时

截图 2　当截图窗口小于100px时

需要说明的是，这里制作这种效果使用了一种技巧。最关键的一个是等比率缩放.它需要两个图片，第一图是原图，第二个图是选择区域后显示的图，用第一个图上的选择坐标+css控制产生第二个图，实际上两个图是一样的，只不过通过css控制了第二张图的显示区域与缩放比率。证据如下：

【证据一】在$(document).ready()函数中通过insertAfter插入"src"也是"ferret.jpg"的图片。再注意一下，这一段里的"overflow: 'hidden',"这一行代码就是让超过100px高宽的图片额外内容隐藏掉。

【证据二】在preview()函数中，首先就定义了scaleX与scaleY，它们的内容就是100/selection.width(或height) ，也就是当selection.width小于100时，这个因子起放大作用，反之起缩小作用。

值得注意的是：

回调函数中实际图的宽高（这里的300,400是实际图的高，要根据实际情况调整！）,回调函数中新图的宽高这些参数必须设置正确、否则会出现 选择偏差

２、提交选区的坐标

如果需要实现真正截图功能必须使用服务器端支持，例如php asp aspx jsp。也就是意味着，在客户端选择只是第一步，如果需进一步的处理，必须要将这选区的坐标提交给服务器。那么如何实现呢？

创建一个表彰，里面有四个隐藏域：

<form action="crop.php" method="post">
<input type="hidden" name="x1" value="" />
<input type="hidden" name="y1" value="" />
<input type="hidden" name="x2" value="" />
<input type="hidden" name="y2" value="" />
<input type="submit" name="submit" value="Submit" />
</form>

然后在初始化imgAreaSelect时，使用onSelectEnd()回调函数将选择后的数据赋给这些隐藏域，正如下面代码那样：

$(document).ready(function () {
$('#ladybug').imgAreaSelect({
onSelectEnd: function (img, selection) {
$('input[name="x1"]').val(selection.x1);
$('input[name="y1"]').val(selection.y1);
$('input[name="x2"]').val(selection.x2);
$('input[name="y2"]').val(selection.y2);
}
});
});

这样当点击"submit按钮"时，页面将上载到服务器，如果使用PHP的话，使用$_POST['x1']等就得到相应的坐标数据了。

以上所述是小编给大家介绍的jQuery插件imgAreaSelect基础讲解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# jquery  # imgareaselect  # jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一  # 利用jQuery插件imgAreaSelect实现获得选择域的图像信息  # 利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）  # 利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）  # javascript截图 jQuery插件imgAreaSelect使用详解  # jquery imgareaselect 使用利用js与程序结合实现图片剪切  # 回调  # 设置成  # 就可以  # 样式表  # 的是  # 几个  # 就会  # 在这个  # 过了  # 第一个  # 有可能  # 设为  # 第二个  # 自定义  # 设置为  # 完后  # 小编  # 这是  # 你可以  # 鼠标 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 微信小程序 input输入框控件详解及实例（多种示例）  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  浅析上传头像示例及其注意事项  如何在阿里云部署织梦网站？  如何挑选高效建站主机与优质域名？  laravel怎么在请求结束后执行任务（Terminable Middleware）_laravel Terminable Middleware请求结束任务执行方法  如何解决hover在ie6中的兼容性问题  如何选择PHP开源工具快速搭建网站？  php结合redis实现高并发下的抢购、秒杀功能的实例  Android 常见的图片加载框架详细介绍  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  如何在景安服务器上快速搭建个人网站？  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  Angular 表单中正确绑定输入值以确保提交与验证正常工作  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  Android中AutoCompleteTextView自动提示  iOS验证手机号的正则表达式  在线制作视频网站免费,都有哪些好的动漫网站？  Laravel如何配置和使用缓存？（Redis代码示例）  Laravel如何与Pusher实现实时通信？（WebSocket示例）  Laravel如何使用withoutEvents方法临时禁用模型事件  Laravel怎么配置S3云存储驱动_Laravel集成阿里云OSS或AWS S3存储桶【教程】  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  重庆市网站制作公司,重庆招聘网站哪个好？  使用spring连接及操作mongodb3.0实例  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  JavaScript数据类型有哪些_如何准确判断一个变量的类型  如何在阿里云域名上完成建站全流程？  如何在局域网内绑定自建网站域名？  Laravel全局作用域是什么_Laravel Eloquent Global Scopes应用指南  清除minerd进程的简单方法  canvas 画布在主流浏览器中的尺寸限制详细介绍  智能起名网站制作软件有哪些,制作logo的软件？  利用JavaScript实现拖拽改变元素大小  EditPlus中的正则表达式实战(6)  php读取心率传感器数据怎么弄_php获取max30100的心率值【指南】  如何注册花生壳免费域名并搭建个人网站？  网站制作价目表怎么做,珍爱网婚介费用多少？  Python并发异常传播_错误处理解析【教程】  网页设计与网站制作内容,怎样注册网站？  linux top下的 minerd 木马清除方法  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  EditPlus中的正则表达式 实战(1)  无锡营销型网站制作公司,无锡网选车牌流程？  javascript基于原型链的继承及call和apply函数用法分析  海南网站制作公司有哪些,海口网是哪家的？  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  如何自定义建站之星模板颜色并下载新样式？