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
0
投稿猜你喜欢
非聚集索引，这个是大家都非常熟悉的一个东西，有时候我们由于业务原因，sql写的非常复杂，需要join很多张表，然后就泪流满面了。。。这时候就- 编写ATM程序实现下述功能，数据来源于文件db.txt1、充值功能：用户输入充值钱数，db.txt中该账号钱数完成修改2、转账功能：用户A向
- 一个封装好的链接Mysql数据库的工具类，可以方便的获取Connection对象关闭Statement、ResultSet、Statment
- 01 并行复制的概念 在MySQL的主从复制架构中，主库上经常会并发的执行很多SQL，只要这些SQL没有产生锁等待，
- 先来看看架构，如下图：部署1.修改hosts在所有的服务器中执行相同的操作。vim /etc/hosts192.168.137.10 mas
- 列表的索引取值1. 列表的索引和字符串一样，列表中的每一个元素也都有一个属于自己的编号，这个编号就是列表的索引。2. 列表索引取值通过字符串
- 如下所示：区别ArrayTensor类型uint8，float32系列{}各类型相互转换uint8转float64：image = imag
- 在写正则表达式的时候总会遇到不少的问题， 特别是在表达式有多个元组的时候。下面看下re模块下的findall()函数和多个表达式元组相遇的时
- 说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）使用：在 HTML元素 中，添加ref属性，然后在JS
- Flask是一个用Python编写的Web应用程序框架，Flask是python的web框架，最大的特征是轻便，让开发者自由灵活的兼容要开发
- 1 索引索引概念索引是一种特殊的文件，包含着对数据表里所有记录的引用指针。可以对表中的一列或多列创建索引，并指定索引的类型，各类索引有各自的
- 爬一个网页时，要保存的数据都没有encode，就导致保存下来的中文都变成unicode了。。。那么，怎么把一个表示字符串的unicode还原
- WMI是Windows系统的一大利器，Python的win32api库提供了对WMI的支持，安装win32api即可使用 WMI。本例通过W
- blankzheng的blog：http://www.planabc.net/margin在中文中我们翻译成外边距或者外补白（本文中引用外边
- 该代码主要是基于python实现判断指定文件夹下是否存在指定后缀的文件。代码如下：import osYour_Dir='你的文件夹/
- VUE-ElementUI 时间区间选择器官方文档中使用picker-options属性来限制可选择的日期一、单个输入框<el-dat
- python数据类型之间怎么转换?数据如果类型不对,在运行中有交集的话就会出现错误,那怎么让两个类型的数据变成同一个类型的呢首先是字符串,在
- scrapy是目前python使用的最广泛的爬虫框架架构图如下解释：Scrapy Engine(引擎): 负责Spider、ItemPipe
- 有个excle表格需要做一些过滤然后写入数据库中，但是日期类型的cell取出来是个数字，于是查询了下解决的办法。基本的代码结构data =
- yagmail 实现发邮件yagmail 可以更简单的来实现自动发邮件功能。1、安装pip install yagmail2、简单举例imp
