欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-12 12:26:04
项目中遇到图片实际显示尺寸的判定问题,图片可能被缩放过,所以实际显示的宽高无法通过常见的各种width,height拿到(都是得到图像的自然宽度或者字面宽度,并非实际显示结...

项目中遇到图片实际显示尺寸的判定问题,图片可能被缩放过,所以实际显示的宽高无法通过常见的各种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

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

上一篇:

下一篇: