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

红太狼 2022-05-22 04:24 291阅读 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 条评论，291人围观）

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

相关阅读

相关 Android获取原始图片Bitmap的宽高大小尺寸，Kotlin

Android获取原始图片Bitmap的宽高大小尺寸，Kotlin val options = BitmapFactory.Options()

你的名字/ 2024年02月17日 08:20/ 0 赞/ 125 阅读

相关 04 JS通过图片连接获取图片的尺寸大小

问题描述项目中有这样一个需求，就是从后台返回了一个图片的链接，然后前端要将这个图片叠加到地图上。在实现这个需求的时候，需要获取到不同图片的尺寸大小，关于图片的尺寸大小后

小咪咪/ 2023年07月24日 09:05/ 0 赞/ 8 阅读

相关 Java 获取图片的大小和尺寸（本地、网络图片）

话不多说，直接甩代码 Juint 进行的单元测试，有需要可以自己封装一下方法我懒省事直接抛出Exception @Test public void

﹏ヽ暗。殇╰゛Y/ 2023年05月31日 06:46/ 0 赞/ 109 阅读

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

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

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

相关 Universalimageloader 原图片大小获取

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

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

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

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

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

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

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

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

相关 php 获取远程图片大小

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

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

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

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

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

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

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

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