JavaScript怎么实现获取img的原始尺寸

前言： 在web开发中，获取图片的原始尺寸是一个常见的需求。通过JavaScript，我们可以用几种方法来实现这一功能。本文将介绍三种常用的方法，包括使用图片对象的属性、使用getComputedStyle()方法以及通过图片的naturalWidth和naturalHeight属性来获取原始尺寸。 方法一：使用图片对象的属性 可以通过创建一个新的Image对象，并设置其src属性为图片的URL，然后获取其width和height属性来获取原始尺寸。

使用图片对象的属性

var img = new Image();
img.src = "image.jpg";
var width = img.width;
var height = img.height;
console.log("原始尺寸：宽度：" + width + "，高度：" + height);

这种方法非常简单，只需要创建一个Image对象，设置其src属性为图片的URL，并在图片加载完毕后获取其width和height属性即可。需要注意的是，如果图片没有加载完成，width和height属性可能还未被正确设置。

方法二：使用getComputedStyle()方法 可以使用getComputedStyle()方法来获取元素的计算样式，通过获取img元素的计算宽度和计算高度来获得原始尺寸。

使用getComputedStyle()方法

var img = document.getElementById("myImg");
var style = getComputedStyle(img);
var width = parseInt(style.getPropertyValue('width'), 10);
var height = parseInt(style.getPropertyValue('height'), 10);
console.log("原始尺寸：宽度：" + width + "，高度：" + height);

需要注意的是，getComputedStyle()返回的是计算样式，因此包含了任何应用在该元素上的样式，例如通过CSS设置的宽度和高度，以及通过JavaScript动态设置的样式。

方法三：使用naturalWidth和naturalHeight属性 在HTML5中，img元素新增了naturalWidth和naturalHeight属性，它们可以直接获获取图片的原始宽度和高度。

使用naturalWidth和naturalHeight属性

var img = document.getElementById("myImg");
var width = img.naturalWidth;
var height = img.naturalHeight;
console.log("原始尺寸：宽度：" + width + "，高度：" + height);

这种方法是最简单的，只需要引用img元素，然后直接访问naturalWidth和naturalHeight属性即可获取原始尺寸。需要注意的是，这两个属性只在图片加载完成后才能访问。

总结： 以上介绍了三种常用的方法来获取img元素的原始尺寸，包括使用图片对象的属性、使用getComputedStyle()方法以及通过naturalWidth和naturalHeight属性。根据实际需求，可以选择适合的方法来获取图片的原始尺寸。无论是通过创建图片对象还是直接访问元素属性，这些方法都可以帮助我们获得图片的准确尺寸，从而进行相应的处理。