获取真实的图像宽度和高度

Question

When I use image.width it returns the image's width which appears on the screen, and I use max-width property on the image and that image appears in some div . Real image's size is much bigger. Is it possible to get a real image's width?

Answer 1

You can get the real dimensions of an image by creating a new image with the same source and get the dimensions of that

var img = new Image();

img.onload = function() {
    var w = this.width,
        h = this.height;
}

img.src = $('img')[0].src; // or whatever

FIDDLE

Answer 2

First, know that images load asynchronously, meaning you'll have to write your code so you get the results in a callback function. Then, use a new image object with no explicit styling (so it can resize to fit native image dimensions) to trigger the callback. For example:

function whatWidth(url, onSize) {
  var img = new Image();
  img.src = url;
  img.onload = function() {
    onSize(img.width, img.height);
  }
}

// Now get the dimensions of an image ...
whatWidth('http://icons.iconarchive.com/icons/deleket/keriyo-emoticons/256/Smiley-rofl-icon.png',
  function(w, h) {
    console.log('width x height: ', w, h);
  }
);

// => Outputs "width x height: 256 256"

It's worth noting that, while this may appear to require a request to the server to fetch the image (independent from whatever image object you're actually showing on your web page), as long as the url is the same as the image on your page the browser cache will [typically] insure only one request is made.

Answer 3

Dart example with caching in case you need it (I know original question mentioned JS, but the logic stays the same):

class _IconSize {
  final int width;
  final int height;

  _IconSize(this.width, this.height);
}


class IconLoader {
  static final IconLoader _this = new IconLoader._init();
  factory IconLoader() => _this;

  // Url -> dimensions.
  final Map<String, _IconSize> _cache = {};

  IconLoader._init() {}

  void withSize(String url, void onLoaded(int width, int height)) {
    if (_cache.containsKey(url)) {
      onLoaded(_cache[url].width, _cache[url].height);

    } else {
      final ImageElement img = new ImageElement();
      img.onLoad.listen((_) {
        var iconSize = new _IconSize(img.width, img.height);
        _cache[url] = iconSize;
        withSize(url, onLoaded);
      });
      img.src = url;
    }
  }
}

Answer 4

Turns out there's a naturalWidth property. Thanks w3schools !

Answer 5

You need to access it on the image's onload event

JS

  var testImg = document.getElementById('testImg'), 
    iWidth=document.getElementById('width'),
    iHeight =    document.getElementById('height');

    testImg.onload = function(){
        console.log(this);
        iWidth.value=this.width;
        iHeight.value=this.height;
    };

Here is the jsfiddle for it: http://jsfiddle.net/mac1175/evgP8/