获取图片原始大小：NaturalWidth and NaturalHeight

红太狼 2022-05-22 04:24 202阅读 0赞

本文转自：[https://www.w3ctech.com/topic/112][https_www.w3ctech.com_topic_112]

## 现代浏览器中获取实际宽度和高度 ##

现代浏览器(包括IE9)为IMG元素提供了`naturalWidth`和`naturalHeight`属性来获取实际宽度与高度 ，代码如下：

var 
      nWidth = document.getElementById('example').naturalWidth,
      nHeight = document.getElementById('example').naturalHeight;

## 在IE7，8中获取实际宽度和高度 ##

在IE8及以前浏览器中并不支持`naturalWidth`和`naturalHeight`属性。为IE7，8采用`new Image()`的方式来获取`width`和`height`：

function getNatural (DOMelement) { 
        var img = new Image();
        img.src = DOMelement.src;
        return {width: img.width, height: img.height};
      }
    
      var 
      natural = getNatural(document.getElementById('example')),
      nWidth = natural.width,
      nHeight = natural.height;

## jQuery naturalWidth() and naturalHeight() ##

为jQuery添加了两个方法:`naturalWidth()`和`naturalHeight()`：

(function($){ 
        var
        props = ['Width', 'Height'],
        prop;
    
        while (prop = props.pop()) {
        (function (natural, prop) { 
          $.fn[natural] = (natural in new Image()) ? 
          function () { 
          return this[0][natural];
          } : 
          function () { 
          var 
          node = this[0],
          img,
          value;
    
          if (node.tagName.toLowerCase() === 'img') {
            img = new Image();
            img.src = node.src,
            value = img[prop];
          }
          return value;
          };
        }('natural' + prop, prop.toLowerCase()));
        }
      }(jQuery));
    
      // 如何使用:
      var 
      nWidth = $('img#example').naturalWidth(),
      nHeight = $('img#example').naturalHeight();

[https_www.w3ctech.com_topic_112]: https://www.w3ctech.com/topic/112

发表评论取消回复

表情：

评论列表（有 0 条评论，202人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android 获取指定图片或文件的大小

/\\ \ 获取指定文件大小　　 \/ public static long getFileSize(File file) throw

旧城等待，/ 2023年03月13日 05:22/ 0 赞/ 10 阅读

相关 JAVA获取图片的宽、高和大小

JAVA获取图片的宽、高、大小如果是本地磁盘文件 File file = new File("C:\\Users\\root\\Desktop\\test.jpg

谁借莪１个温暖的怀抱￠/ 2023年01月22日 11:46/ 0 赞/ 384 阅读

相关 Universalimageloader 原图片大小获取

Universalimageloader1.9.5上还没有对外提供获取图片的原大小功能，如果需要获取图片的源大小，可参考stackoverflow上的解决办法 [stack

秒速五厘米/ 2022年09月25日 00:19/ 0 赞/ 153 阅读

相关 JS 获取图片的原始尺寸

如何获取图片的原始尺寸大小？　　如下，当给 img 设置一个固定的大小时，要怎样获取图片的原始尺寸呢？ oImg{ width:

怼烎@/ 2022年09月16日 03:41/ 0 赞/ 204 阅读

相关 js获取上传图片真实的尺寸大小和存储大小

</pre><pre name="code" class="html"><input id="file" type="file"> <input id="But

快来打我*/ 2022年07月15日 16:22/ 0 赞/ 253 阅读

相关获取远程图片的宽、高和大小

php中获取远程图片的宽、高和大小，这里介绍两种方法：方法一： function getImageinfo($url) { $result = array(

浅浅的花香味﹌/ 2022年06月17日 02:57/ 0 赞/ 312 阅读

相关获取图片原始大小：NaturalWidth and NaturalHeight

本文转自：[https://www.w3ctech.com/topic/112][https_www.w3ctech.com_topic_112] 现代浏览器中获取实际宽度

红太狼/ 2022年05月22日 04:24/ 0 赞/ 203 阅读

相关 php 获取远程图片大小

/ 获取远程图片的宽高和体积大小 @param string $url 远程图片的链接

Love The Way You Lie/ 2022年04月08日 11:56/ 0 赞/ 256 阅读

相关前端获取图片存储大小的方法

1利用input元素获取如果是input元素 <input type="file" id='myinput'> var file=document.getElem

左手的ㄟ右手/ 2021年12月14日 12:55/ 0 赞/ 406 阅读

相关如何用JavaScript在浏览器端获取图片的原始尺寸大小？

如何用JavaScript在浏览器端获取图片的原始尺寸大小？ Webkit浏览器(谷歌浏览器等)是在图片的loaded事件之后才能获取高度和宽度值。所以，你不能使用tim...

红太狼/ 2020年06月23日 15:53/ 0 赞/ 623 阅读