本文介绍如何通过 JavaScript 的 Image 对象获取图片的实际宽高，解决因 CSS 样式设置导致的尺寸偏差问题。通过监听 onload 事件或同步创建 Image 实例，可准确获取图片原始像素尺寸，适用于需要真实尺寸数据的场景。
获取图片实际宽高的必要性
本文介绍一种通过 JavaScript 在图片加载完成后获取其实际宽高的方法，供读者参考。
通常，开发者会使用 jQuery 的 .width()/.height() 方法，或原生 JavaScript 的 .offsetWidth/.offsetHeight 属性来获取图片尺寸。然而，当图片通过 CSS 样式设置了固定的宽高时，这些方法返回的是渲染后的尺寸，而非图片原始的实际宽高。在某些需要获取原始像素尺寸的场合，这种结果并不符合预期。因此，我们需要一种能够绕过 CSS 样式干扰、直接获取图片真实尺寸的方法。
基础实现方案
<img src="01.jpg" id="test" width="250px">
以下是实现该功能的 JavaScript 代码示例：
//图片加载完成后获取图片实际宽高
var _test = document.getElementById("test");
test.onload = function(){
imgSize.call(_test);
}
function imgSize(){
var imgObj = new Image();
imgObj.src = this.src;
alert(imgObj.width + "\n" + imgObj.height);
}
若需在其他函数中调用此实际宽高，可将 alert(imgObj.width + "\n" + imgObj.height); 替换为 return imgObj，并通过以下方式调用：
调用实际宽高的方法
window.onload = function(){
function a(){
var real= imgSize.call(_test);
var realwidth = real.width;
alert(realwidth);
}
a();
}
上述方法较为繁琐，经简化后可写作：
简化版代码实现
window.onload = function(){
var _test = document.getElementById("test"); //若是jq，则直接将此代码换成 var _test = $("#test"); 即可。
var imgObj = new Image();
imgObj.src = _test.src; //若是jq，则直接将此代码换成 imgObj.src = _test.attr("src"); 即可。
alert(imgObj.width);
}
如此，即可在其他方法中直接调用图片的实际宽高。
更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家 JavaScript 程序设计有所帮助。