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

我尝试过这样的事情：

var Height = $(this).naturalHeight; 

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

greez

Answer 1

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

Answer 2

我使用原生的javascript属性

.naturalWidth / .naturalHeight

在我使用的jQuery对象上

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

要么

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

如果没有选择jQuery对象。

使用jQuery对象上的get（0），您可以访问关联的DOM元素 。 在本机DOM元素上，您可以使用本机JavaScript代码（此处访问nativ javascript属性.naturalWidth）

Answer 3

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

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

Answer 4

获取图像尺寸的一种方法是使用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 5

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

 /* * NaturalWith calculation function. It has to be async, because sometimes(eg 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 6

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

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

Answer 7

只是试试

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

无论如何基本上都是naturalWidth和naturalHeight的计算

Answer 8

来自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();