详细说明用Javascript获取图片原始宽度和高度的方法

序

在网上用Javascript获取图片原始宽度和高度的方法有很多。这篇文章将再次谈论这个问题，这可能对一些人有所帮助。

方法的详细说明

如果想得到页面中img元素的原始大小，以宽度为例，可能首先会想到元素的innerWidth属性或者jQuery中的width()方法。

如下所示：

img id=' img ' src=' http :1 . jpg ' script type=' text/JavaScript ' var img=document . getelementbyid(' img ')；console . log(img . innerwidth)；//600/脚本，好像可以得到图片的大小。

然而，如果宽度属性被添加到img元素，例如，图片的实际宽度是600，并且宽度被设置为400。此时，innerWidth是400而不是600。显然，用innerWidth获取图片的原始大小是不可靠的。

这是因为innerWidth属性获取元素框模型的实际渲染宽度，而不是图片的原始宽度。

img id=' img ' src=' http :1 . jpg ' width=' 400 '脚本类型=' text/JavaScript ' var img=document . getelementbyid(' img ')；console . log(img . innerwidth)；//400/scriptjQuery的Width()方法调用底层的innerWidth属性，所以width()方法得到的宽度不是图片的原始宽度。

那么如何得到img元素的原始宽度呢？

自然宽度/自然高度

HTML5提供了一个新的属性，naturalWidth/naturalHeight，可以直接获取图片的原始宽度和高度。这两个属性已经在火狐/Chrome/Safari/Opera和IE9中实现。

如下所示：

var natural width=document . getelementbyid(' img ')。自然宽度，自然高度=document.getElementById('img ')。自然高度；主要浏览器中自然宽度/自然高度的兼容性如下：

图片来自：http://caniuse.com/#search=naturalWidth

因此，如果您不考虑IE8兼容，您可以安全地使用自然宽度/自然高度属性。

IE7/8中的兼容性实现；

IE8及更早版本的浏览器不支持自然宽度和自然高度属性。

在IE7/8中，我们可以使用新的Image()来获取图片的原始大小，如下所示：

函数getnaturesize(Domelement){ var img=new Image()；img . src=DomElement . src；返回{ width: img.width，height : img . height }；}//使用var natural=getnatural size(document . getelementbyid(' img ')，naturalwidth=natural.width，natural heat=natural . height；与IE7浏览器兼容的功能封装：

函数getnaturesize(Domelement){ var natureSize={ }；if(window . natural width window . natural height){ naturalisize . width=domelement . natural width；自然高度=多元素自然高度；} else { var img=new Image()；img . src=DomElement . src；natureSize . width=img . width；natureSizeheight=img.height}返回natureSize}//使用var natural=getnatural size(document . getelementbyid(' img ')，naturalwidth=natural.width，natural heat=natural . height；摘要

以上就是本文的全部内容，希望能给大家的学习或工作带来一些帮助。有问题可以留言交流。