JavaScript 获取图片实际宽高:绕过 CSS 样式限制

作者:微光时间:2026-10-29 22:24:39浏览:150

本文介绍如何通过 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 程序设计有所帮助。

作者最新文章