如何在 JavaScript 中获取原始图像大小（宽度和高度）
答案：使用 HTML5 naturalWidth 和 naturalHeight
您可以使用 HTML5 图像 naturalWidth 和 naturalHeight 属性轻松找到图像的原始或固有宽度和高度。 所有主要的网络浏览器都支持这些属性，例如 Chrome、Firefox、Safari、Opera、Internet Explorer 9 及更高版本。
让我们看一个例子来了解它的基本工作原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Find Real Image Width and Height</title>
<script>
function imgSize(){
var myImg = document.querySelector("#sky");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
}
</script>
</head>
<body>
<img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
<p><button type="button" onclick="imgSize();">Get Original Image Size</button></p>
</body>
</html>或者，如果您想使用 jQuery 执行相同的任务，您可以将 load() 方法与 attr() 方法结合使用，如下例所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Real Image Dimensions</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var img = $("#sky");
// 创建虚拟图像以获得真实的宽度和高度
$("<img>").attr("src", $(img).attr("src")).load(function(){
var realWidth = this.width;
var realHeight = this.height;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
});
});
});
</script>
</head>
<body>
<img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
<p><button type="button">Get Original Image Size</button></p>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements