Javascript获取图片原始宽度和高度的方法详解
JavaScript获取图片原始尺寸的方法
随着网络的发展，网页中的图片越来越丰富多样，而获取图片的原始尺寸是前端开发中的常见问题。本文将通过实例代码和深入，分享给大家如何在JavaScript中获取页面图片的原始尺寸。希望通过本文的学习，大家能够更好地处理图片尺寸问题。
我们先了解一下获取图片尺寸的一些常见方法。页面中的img元素，我们可能会尝试通过元素的innerWidth属性或者jQuery中的width()方法来获取其尺寸。这些方法并不能获取到图片的原始尺寸。原因在于这些方法获取的是元素盒模型的实际渲染尺寸，而非图片的原始尺寸。当给img元素设置width属性时，innerWidth属性会随之改变，因此无法获取到真实的原始尺寸。
那么该如何获取图片的原始尺寸呢？HTML5提供了一个非常有用的新属性——naturalWidth和naturalHeight。这两个属性可以直接获取图片的原始宽度和高度。这个属性在Firefox、Chrome、Safari、Opera以及IE9等现代浏览器中都已经实现。使用方法如下：
```javascript
var naturalWidth = document.getElementById('img').naturalWidth;
var naturalHeight = document.getElementById('img').naturalHeight;
```
我们必须注意到naturalWidth和naturalHeight在一些旧版浏览器中的兼容性并不理想，特别是在IE8及以前版本的浏览器并不支持这两个属性。在实际使用中，我们需要考虑兼容性问题，或者使用一些额外的手段来确保在旧版浏览器中也能获取到图片的原始尺寸。
获取图片的原始尺寸是一个常见的需求，而HTML5提供的naturalWidth和naturalHeight属性为我们提供了一个方便的方法来解决这个问题。但在实际使用中，我们需要考虑兼容性，或者使用其他方法来确保在所有浏览器中都能正确获取到图片的原始尺寸。希望本文的分享能为大家带来帮助，更好地处理图片尺寸问题。在IE7和IE8浏览器中，获取图片的原始尺寸可以通过创建一个新的Image对象来实现。这是一种相当直观的方法，下面就是具体的实现过程。
定义一个名为getNaturalSize的函数，它接受一个DOM元素作为参数。在这个函数中，我们创建一个新的Image对象，并将其源属性设置为传入DOM元素的源属性。通过这种方式，我们可以获取到图片的原始宽度和高度。
如下：
```javascript
function getNaturalSize(DomElement) {
var img = new Image();
img.src = DomElement.src;
return {
width: img.width,
height: img.height
};
}
```
使用这个函数非常简单。只需获取你需要的图片元素的ID，然后调用getNaturalSize函数，就可以得到图片的原始尺寸。例如：
```javascript
var natural = getNaturalSize(document.getElementById('img')),
natureWidth = natural.width,
natureHeight = natural.height;
```
对于IE7+浏览器，我们需要考虑更多的兼容性。我们稍微改进了getNaturalSize函数，通过检查window对象的naturalWidth和naturalHeight属性是否存在，如果存在则直接使用，不存在则创建新的Image对象来获取尺寸。这样的改进确保了我们的代码在更多的浏览器上能够正常工作。
```javascript
function getNaturalSize(Domlement) {
var natureSize = {};
if (window.naturalWidth && window.naturalHeight) {
natureSize.width = Domlement.naturalWidth;
natureSize.height = Domlement.naturalHeight;
} else {
var img = new Image();
img.src = DomElement.src;
natureSize.width = img.width;
natureSize.height = img.height;
}
return natureSize;
}
```
使用方式与之前相同。这样，无论你是在哪种浏览器上，都能方便地获取到图片的原始尺寸。希望这篇文章能对大家的学习和工作有所帮助。如果有任何疑问，欢迎留言交流。
以上是本文的全部内容，由Cambrian系统渲染完成。