利用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高级程序设计
Dec 29 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
Javascript 面向对象 重载
2010/05/13 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
小程序实现分类页
2019/07/12 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
urllib2自定义opener详解
2014/02/07 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Django数据库操作之save与update的使用
2020/04/01 Python
Python进行特征提取的示例代码
2020/10/15 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
2014年健康教育实施方案
2014/02/17 职场文书
大学生党员个人总结
2015/02/13 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server