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 相关文章推荐
extJs 下拉框联动实现代码
Apr 09 Javascript
javascript时区函数介绍
Sep 14 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
微信小程序实现日历效果
Dec 28 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
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
PHP 地址栏信息的获取代码
2009/01/07 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
Python实现删除文件但保留指定文件
2015/06/21 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
优秀生推荐信范文
2013/11/28 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
寄语十八大感言
2014/02/07 职场文书
项目施工员岗位职责
2014/03/09 职场文书
我的画教学反思
2014/04/28 职场文书
文明生主要事迹
2014/05/25 职场文书
单位工作证明书格式
2014/10/04 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android