JavaScript中获取图片各种高宽详解

jk 1年前 ⋅ 7347 阅读

源于:今日头条(查看原文)

一、上一文记录了JS中网页、屏幕中的各种宽高的辨析,这一节主要记录JS中的获取图片各种高宽方面的不同,摘录笔记仅供学习参考所用。

1、可以获取图片高宽的方法有:

" list-paddingleft-2">

  • // 图片地址 后面加时间戳是为了避免缓存

  • var img_url = '/placea/placeb/**.jpg?'+Date.parse(new Date());

    // 创建图片对象

    var img = new Image();

    // 改变图片的地址

    img.src = img_url;

    // 加载完成执行

    img. function(){

    // 打印输出

    alert('width:'+img.width+',height:'+img.height);

    };

    通过" list-paddingleft-2">

  • obj.style.width:只有在标签里用style属性写进了width的大小,才可以获取到值,否则只返回的为空。注意:在引入的样式表中添加width值(不管是link引入还是html页面中使用style标签)也一样获取不到值,返回为空。

  • obj.offsetWidth(offsetHeight);

    obj.clientWidth(clientHeight);

    这俩方法如果标签没有设置padding值及border值,那么它们两个获取到的值是一样的。但很多情况下都不是这样的,其实offsetWidth得到的是width值+padding值+border值,clientWidth得到的是width值+padding值。

  • getComputedStyle;

    currentStyle;

    这俩是处理兼容性的两个方法,获取到的值都是图片在屏幕上显示的仅仅是图片的高宽值,不会获取到img标签的padding及border值;但其中getComputedStyle适用于Firefox/IE9/Safari/Chrome/Opera浏览器,currentStyle适用于IE6/7/8。但是如果img标签即使没有设置style属性也没有引入样式表,那么只有getComputedStyle能获取到值,即为图片本身高宽值,currentStyle则返回auto。

  • obj.naturalWidth(naturalHeight)方法,这是HTML5里新添加的一个获取元素高宽的方法,但只适用于Firefox/IE9/Safari/Chrome/Opera浏览器。需要注意是的在IE6/7/8浏览器中image.src只有在img图片完全加载出来以后才获取得到,否则会报错。

  • JQ获取图片宽高:

    假设图片是<img />,图片的宽度为width,高度为height

  • var width = $("img").width();

    var height = $("img").height();

    • 获取图片路径(src)的方法:

      ① 通过获取图片img节点的src属性

      <img id='test' src='1.png' />

      ② 通过document.getElementById找到img节点

      var oImg= document.getElementById('test');

      ③ 获取src属性

      alert(oImg.src);//获取src属性

      JavaScript中获取图片各种高宽详解


    全部评论: 0

      我有话说: