利用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 相关文章推荐
javascript之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
Javascript 生成指定范围数值随机数
Jan 09 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
jquery选择器使用详解
2014/04/08 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
js中日期的加减法
2015/05/06 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
javascript实现表单验证
2016/01/29 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
vue中使用input[type="file"]实现文件上传功能
2018/09/10 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
宣传工作经验材料
2014/06/02 职场文书
房产协议书范本2014
2014/09/30 职场文书
红色影片观后感
2015/06/18 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis