我是靠谱客的博主 合适小鸭子,最近开发中收集的这篇文章主要介绍js 获取图像缩放后的实际宽高,位置等信息,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

项目中遇到图片实际显示尺寸的判定问题,图片可能被缩放过,所以实际显示的宽高无法通过常见的各种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 4Firefox3.5pera 9.63+已经支持getBoundingClientRect方法。

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

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

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

最后

以上就是合适小鸭子为你收集整理的js 获取图像缩放后的实际宽高,位置等信息的全部内容,希望文章能够帮你解决js 获取图像缩放后的实际宽高,位置等信息所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(144)

评论列表共有 0 条评论

立即
投稿
返回
顶部