js 获取图像缩放后的实际宽高,位置等信息
作者:分界线 时间:2024-05-22 10:41:09
项目中遇到图片实际显示尺寸的判定问题,图片可能被缩放过,所以实际显示的宽高无法通过常见的各种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
来源:http://www.qdfuns.com/notes/18169/169e7d15d4dd9ad90fe7c739142b2e2c.html
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python查看模块,对象的函数方法
![](https://img.aspxhome.com/file/2023/2/84982_0s.jpg)
javascript常用的方法整理
打印出python 当前全局变量和入口参数的所有属性
浅谈Python类的单继承相关知识
ASP简单实现数字和字母验证码
php中session使用示例
javascript数组的使用
PyTorch中torch.tensor与torch.Tensor的区别详解
pycharm通过ssh连接远程服务器教程
![](https://img.aspxhome.com/file/2023/9/95919_0s.jpg)
Mysql数据库实现多字段过滤的方法
![](https://img.aspxhome.com/file/2023/8/80148_0s.jpg)
django admin后台添加导出excel功能示例代码
![](https://img.aspxhome.com/file/2023/9/62309_0s.png)
python决策树之CART分类回归树详解
![](https://img.aspxhome.com/file/2023/3/97063_0s.png)
对Pytorch神经网络初始化kaiming分布详解
![](https://img.aspxhome.com/file/2023/0/75870_0s.jpg)
django将数组传递给前台模板的方法
支持python的分布式计算框架Ray详解
![](https://img.aspxhome.com/file/2023/2/102912_0s.jpg)
python中 logging的使用详解
JavaScript实现的伸展收缩型菜单代码
![](https://img.aspxhome.com/file/2023/6/136696_0s.png)
Python Flask RESTful使用demo演示
![](https://img.aspxhome.com/file/2023/9/124989_0s.png)
将python代码和注释分离的方法
TensorFlow基本的常量、变量和运算操作详解
![](https://img.aspxhome.com/file/2023/7/127677_0s.jpg)