Question

我试过这样的事情：

var Height = $(this).naturalHeight;

但它不起作用。有没有办法做到这一点

greez

Answer 1

我在应用jQuery然后剥离jQuery后使用本机javascript属性

.naturalWidth / .naturalHeight

在jQuery对象上我使用

var width = this.naturalWidth; 
var height = this.naturalHeight;

或

var width = $("selector").get(0).naturalWidth; 
var height = $("selector").get(0).naturalHeight;

如果没有选择jQuery对象。

With get(0) on a jQuery object you can access the associated DOM-element。在本机DOM元素上，您可以使用本机JavaScript代码（此处访问nativ javascript属性.naturalWidth）

Answer 2

在我看来，接受的解决方案会修改对象的外观。有时jQuery有点太有用了，你必须告诉它你的方式。如果要使用naturalWidth或naturalHeight，则只需使用已存在的那个，方法是将jQuery对象转换为本机浏览器元素引用。

var Height = document.getElementById($(this).attr("id")).naturalHeight;

Answer 3

获取图像尺寸的一种方法是使用javascript动态加载图像副本并获取尺寸：

// preload the image
var height, width = '';
var img = new Image();
var imgSrc = '/path/to/image.jpg';

$(img).load(function () {
    alert('height: ' + img.height);
    alert('width: ' + img.width);
    // garbage collect img
    delete img;
}).error(function () {
    // image couldnt be loaded
    alert('An error occurred and your image could not be loaded.  Please try again.');
}).attr({ src: imgSrc });

Answer 4

这是一个jQuery函数的例子，它适用于较旧的IE版本，即使对于大图像也是如此。

/*
 * NaturalWith calculation function. It has to be async, because sometimes(e.g. for IE) it needs to wait for already cached image to load.
 * @param onNaturalWidthDefined callback(img) to be notified when naturalWidth is determined.
 */
jQuery.fn.calculateNaturalWidth = function(onNaturalWidthDefined) {
    var img = this[0];
    var naturalWidth = img.naturalWidth;
    if (naturalWidth) {
        onNaturalWidthDefined(img);
    } else { //No naturalWidth attribute in IE<9 - calculate it manually.
        var newImg = new Image();
        newImg.src = img.src;
        //Wait for image to load
        if (newImg.complete) {
            img.naturalWidth = newImg.width;
            onNaturalWidthDefined(img);
        } else {
            $(newImg).load(function() {img.naturalWidth=newImg.width; onNaturalWidthDefined(img)});
        }
    }
};

用法很简单：

$(img).calculateNaturalWidth(function(img) { alert(img.naturalWidth)});

Answer 5

您可以做的最好是在不设置宽度和高度的情况下隐藏图像，并将此图像的图像源用作原始图像。然后计算这个隐藏图像的尺寸。

否则，您可以计算服务器端的物理维度，并将其传递给页面中的隐藏元素，并从该隐藏元素值中获取大小。

Answer 6

只会尝试

var width = $("img", this).css('width', 'auto').width();
var height= $("img", this).css('height', 'auto').height();

基本上是naturalWidth和naturalHeight的计算

Answer 7

来自HERE

的来源

这是一个简短的jQuery（任何版本）插件，它添加了两个方法：naturalWidth（）和naturalHeight（）。它使用分支来确定浏览器是否支持naturalWidth和naturalHeight。如果支持，该方法将成为naturalWidth或naturalHeight属性的getter。如果不支持，该方法将创建一个新的无样式图像元素，并返回该元素的实际宽度和高度。

  // adds .naturalWidth() and .naturalHeight() methods to jQuery
  // for retreaving a normalized naturalWidth and 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));

  // Example usage:
  var 
  nWidth = $('img#example').naturalWidth(),
  nHeight = $('img#example').naturalHeight();

Answer 8

$this.css('height', 'auto');
var height = $this.height();

有没有办法用jquery读出图像的“naturalWidth”？

8 个答案: