利用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 相关文章推荐
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
innerText 使用示例
Jan 23 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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下使用SimpleXML 处理XML 文件
2010/02/27 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
基本DOM节点操作
2017/01/17 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
Python import自定义模块方法
2015/02/12 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
Python try except else使用详解
2021/01/12 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
企业宣传标语
2014/06/09 职场文书
医学专业自荐信
2014/06/14 职场文书
结婚典礼致辞
2015/07/28 职场文书
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL