利用jQuery插件imgAreaSelect实现获得选择域的图像信息


Posted in Javascript onDecember 02, 2016

利用jQuery插件imgAreaSelect实现获得选择域的图像信息

还是先来分析一下:

(以下的值,如何获得,以后在具体的实现中再来分析,现在只谈宏观的)

如何获得选择域的图像信息?  其实就是要我们如何获得这个选择区域,在图像中的那个位置,并且这个区域的大小是多少?

把位置和大小告诉了计算机,它就知道我们是要获取那一块的图像信息了。

(我们的选择区域,是在一个平面当中,而且是一个规则的图形,正方形,或都矩形(通俗:长方形))

大小:

这个区域的宽度,高度值,两值相乘,就是这个区域的面积,即大小。(这个应该不难)

位置:

1.假设我们只告诉计算机,这个选择区域一个[起始点的坐标值],而且也告诉电脑这个区域的[面积]那么符合这两个条件情况有四:

“红色”为选择区域的起始点坐标;

A、B、C、D、为 以红色为起始点,画出的选择区域(每个区域的面积是相同的,起始点坐标也相同,却可以出来四种情况);

利用jQuery插件imgAreaSelect实现获得选择域的图像信息

1.假设我们告诉计算机,这个选择区域两个坐标值,也告诉电脑区域面积:

  “红色”为选择区域的起始点坐标,

     “蓝色”为选择区域的横向结束点坐标值

"绿色"为选择区域的面积;

要同时满足这三个条件,只可能有一种情况

利用jQuery插件imgAreaSelect实现获得选择域的图像信息

所以得出,我们要获得这个图像区域信息,就需要得到

以上三个值:两点坐标值,和一个面积值

$('#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实现图片上传裁剪(放大缩小)》,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
JS中Attr的用法详解
Oct 09 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 #Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 #Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 #Javascript
搭建Bootstrap离线文档的方法
Dec 02 #Javascript
巧用Javascript的逻辑运算符
Dec 02 #Javascript
Vue.js第四天学习笔记(组件)
Dec 02 #Javascript
Javascript之面向对象--接口
Dec 02 #Javascript
You might like
认识并使用PHP超级全局变量
2010/01/26 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python实现获取Ip归属地等信息
2016/08/27 Python
机器学习python实战之决策树
2017/11/01 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
高考升学宴答谢词
2015/01/20 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
如何用Python搭建gRPC服务
2021/06/30 Python