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 4\Firefox3.5\0pera 9.63+已经支持getBoundingClientRect方法。

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

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

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

赞 (0)

相关推荐

  • PHP实现对png图像进行缩放的方法(支持透明背景)

    本文实例讲述了PHP实现对png图像进行缩放的方法.分享给大家供大家参考.具体实现方法如下: function smart_resize_image( $file, $width = 0, $height = 0, $proportional = false, $output = 'file', $delete_original = true, $use_linux_commands = false ) { if ( $height <= 0 && $width <= 0 )

  • C#数字图像处理之图像缩放的方法

    本文实例讲述了C#数字图像处理之图像缩放的方法.分享给大家供大家参考.具体如下: //定义图像缩放函数 private static Bitmap ZoomP(Bitmap a, float s, float v) { Bitmap bmp = new Bitmap((int)(a.Width * s), (int)(a.Height * v), System.Drawing.Imaging.PixelFormat.Format24bppRgb); Graphics g = Graphics.F

  • Android开发之图形图像与动画(二)Animation实现图像的渐变/缩放/位移/旋转

    Android开发之图形图像与动画(二)Animation实现图像的渐变/缩放/位移/旋转

    Android 平台提供了两类动画. 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转.平移.放缩和渐变). 下面就讲一下Tweene Animations. 主要类: Animation 动画 AlphaAnimation 渐变透明度 RotateAnimation 画面旋转 ScaleAnimation 渐变尺寸缩放 TranslateAnimation 位置移动 AnimationSet 动画集 一.AlphaAnimation 其中AlphaAnimatio

  • Android 图像处理(类型转换,比例缩放,倒影,圆角)的小例子

    1.放大缩小图片 复制代码 代码如下: public static Bitmap zoomBitmap(Bitmap bitmap,int w,int h){            int width = bitmap.getWidth();            int height = bitmap.getHeight();            Matrix matrix = new Matrix();            float scaleWidht = ((float)w / w

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

    项目中遇到图片实际显示尺寸的判定问题,图片可能被缩放过,所以实际显示的宽高无法通过常见的各种width,height拿到(都是得到图像的自然宽度或者字面宽度,并非实际显示结果) 在网上百度了一大圈也没有找到,今天早上偶然找到2个很方便的方法: object.getClientRects();和object.getBoundingClientRect(); 可以轻易获得当前元素的绝对位置(不含scrollLeft和scrollTop,需要用的话单独加上去)和显示出来的实际宽高 getClientR

  • 原生js获取浏览器窗口及元素宽高常用方法集合

    窗口可视区域宽度: document.documentElement.clientWidth || document.body.clientWidth; 窗口可视区域高度: document.documentElement.clientHeight || document.body.clientHeight; 窗口可视区域宽度+边线和滚动条: document.body.offsetWidth ; 窗口可视区域高度+边线和滚动条: document.body.offsetHeight ; 实际内

  • 如何在Vue中获取DOM元素的实际宽高

    如何在Vue中获取DOM元素的实际宽高

    目录 前言 一.获取元素 二.获取元素宽高 补充:vue项目获取dom元素宽高总是不准确 总结 前言 最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素 在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素. 为了保险起见,所有的 DOM 操作建议都放在 $nextTick() 方法中. <template> <div class="box

  • 解决vue项目获取dom元素宽高总是不准确问题

    dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确: this.$refs.editor[0].offsetHeight; 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕: 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识:vue 获取 指定元素的高度宽度等(

  • js判断图片加载完成后获取图片实际宽高的方法

    本文实例讲述了js判断图片加载完成后获取图片实际宽高的方法.分享给大家供大家参考,具体如下: 通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg&q

  • JS实现按比例缩小图片宽高

    本文实例为大家分享了JS实现按比例缩小图片宽高的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>JS 按比例缩小图片宽高</title> </head> <body> <div> <input type="file" name="" id="upload"> <img sr

  • js获取图片宽高的方法

    js获取图片宽高的方法

    本文分享多种js获取图片宽高的方法,并且通过实例进行分析,希望大家从中有所收获. 一.简陋的获取图片方式 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'

  • php缩放图片(根据宽高的等比例缩放)实例介绍

    推荐一个简单实用的缩放图片工具 SimpleImage,参考http://www.white-hat-web-design.co.uk/blog/resizing-images-with-php/ 使用方法: 设定宽高,不等比例缩放 复制代码 代码如下: <?php include('SimpleImage.php'); $image = new SimpleImage(); $image->load('picture.jpg'); $image->resize(250,400); $i

  • JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应 复制代码 代码如下: <img src="http://xxx.jpg" id="imgs" onload="adapt();"/> 复制代码 代码如下: function adapt(){ var tableWidth = $("#imgTable").width(); //表格宽度 var img = new Image(); img.src =$('#imgs

  • android不读入内存获取图像宽高信息的方法

    本文实例讲述了android不读入内存获取图像宽高信息的方法.分享给大家供大家参考.具体如下: BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = true; Bitmap bitmap = BitmapFactory.decodeFile("/sdcard/test.jpg", options); int w = options.outWidth; int

随机推荐