利用jQuery插件imgAreaSelect实现获得选择域的图像信息
更新时间：2016年12月02日 15:01:54 作者：船长op
本篇文章主要对jQuery插件imgAreaSelect实现获得选择域的图像信息的方法做了简要分析说明。需要的朋友来看下吧，希望对大家有所帮助
还是先来分析一下：
（以下的值，如何获得，以后在具体的实现中再来分析，现在只谈宏观的）
如何获得选择域的图像信息? 其实就是要我们如何获得这个选择区域，在图像中的那个位置，并且这个区域的大小是多少？
把位置和大小告诉了计算机，它就知道我们是要获取那一块的图像信息了。
（我们的选择区域，是在一个平面当中，而且是一个规则的图形，正方形，或都矩形（通俗：长方形））
大小：
这个区域的宽度，高度值，两值相乘，就是这个区域的面积，即大小。（这个应该不难）
位置：
1.假设我们只告诉计算机,这个选择区域一个[起始点的坐标值],而且也告诉电脑这个区域的[面积]那么符合这两个条件情况有四：
“红色”为选择区域的起始点坐标；
A、B、C、D、为 以红色为起始点，画出的选择区域（每个区域的面积是相同的，起始点坐标也相同，却可以出来四种情况）；
1.假设我们告诉计算机,这个选择区域两个坐标值,也告诉电脑区域面积：
“红色”为选择区域的起始点坐标，
“蓝色”为选择区域的横向结束点坐标值
"绿色"为选择区域的面积；
要同时满足这三个条件，只可能有一种情况
所以得出，我们要获得这个图像区域信息，就需要得到
以上三个值:两点坐标值，和一个面积值
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
以上就是本文的全部内容，希望对大家有所帮助，感兴趣的朋友可以看下《利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）》和《利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）》，谢谢对脚本之家的支持！
相关文章
jquery ajax提交整个表单元素的快捷办法，需要的朋友可以参考一下2013-03-03
本节让我们继续Jquery知识的了解：文档处理。文档处理主要是对HTML元素进行一些增操作，删除操作，复制操作，替换操作。2009-05-05
下面小编就为大家带来一篇jquery获取复选框checkbox的值实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
json 是 Ajax 中使用频率最高的数据格式，在浏览器和服务器中之间的通讯可离不开它2011-12-12
extend是常用的参数处理函数，特别是对默认值的使用，但是在使用过程中，默认值往往是不能被改变的,需要的朋友可以参考下2014-08-08
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
下面小编就为大家带来一篇完美解决jQuery fancybox ie 无法显示关闭按钮的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
需要做的只是引入其脚本，在HTML标签上赋一个“data-clipboard-target”属性然后写一小段JavaScript片段。为了演示假定有一个货币转换应用，在一个文本框中输入数值时同时将兑换结果显示在另一个文本框中，当点击文本框时，会触发事件将其复制到剪贴板然后显示一条消息。2016-04-04
或许在网络上你已经见过数百种通过jQuery实现的相册，但是我们发现的这些相册，他们有额外的东西，优雅和独特的创意！每个相册都是可在线预览和免费下载的。你可以为你的Web项目添加色彩。2011-02-02
事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层2014-07-07
jquery使用append(content)方法注意事项分享
append(content)函数的功能向每个匹配的元素内部追加内容，在使用方法上需要引起大家的注意，详细看下面示例2014-01-01
最新评论