js 获取图像缩放后的实际宽高,位置等信息


Posted in Javascript onMarch 07, 2017

项目中遇到图片实际显示尺寸的判定问题,图片可能被缩放过,所以实际显示的宽高无法通过常见的各种width,height拿到(都是得到图像的自然宽度或者字面宽度,并非实际显示结果)

在网上百度了一大圈也没有找到,今天早上偶然找到2个很方便的方法:

object.getClientRects();object.getBoundingClientRect();

可以轻易获得当前元素的绝对位置(不含scrollLeft和scrollTop,需要用的话单独加上去)和显示出来的实际宽高

getClientRects 和 getBoundingClientRect 的区别

getClientRects 返回一个TextRectangle集合,就是TextRectangleList对象。

getBoundingClientRect 返回 一个TextRectangle对象,即使DOM里没有文本也能返回TextRectangle对象.

浏览器差异:

除了safari,firefox2.0外所有浏览器都支持getClientRects和getBoundingClientRect,

firefox 3.1给TextRectangle增加了 width 和 height。

ie 和非ie浏览器在使用getClientRects还是有些差别的,ie获取TextRectangleList的范围很大。而非ie获取的范围比较小, 只有display:inline的对象才能获取到TextRectangleList,例如em i span 等标签。

通过测试,至少Chrome 2+\Safari 4\Firefox3.5\0pera 9.63+已经支持getBoundingClientRect方法。

出于浏览器兼容的考虑,现在用得最多的是getBoundingClientRect,经常用来获取一个element元素的viewport坐标。

MDN关于getBoundingClientRect的详细介绍:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js日历功能对象
Jan 12 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
javascript冒泡排序小结
Apr 10 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 #Javascript
AngularJS监听路由变化的方法
Mar 07 #Javascript
微信小程序开发之入门实例教程篇
Mar 07 #Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 #Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 #Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 #Javascript
详解JS异步加载的三种方式
Mar 07 #Javascript
You might like
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
Ionic2调用本地SQlite实例
2017/04/22 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
GOJS+VUE实现流程图效果
2018/12/01 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
python自动安装pip
2014/04/24 Python
python基础教程之循环介绍
2014/08/29 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
物理研修随笔感言
2014/02/14 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
作文评语怎么写
2014/12/25 职场文书
运动会开幕式致辞
2015/07/29 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
javascript实现计算器功能详解流程
2021/11/01 Javascript
vue特效之翻牌动画
2022/04/20 Vue.js