JS獲取圖片原始寬高即圖片原始尺寸,我們可以通過html5 naturalWidth和naturalHeight屬性來獲取圖片原始尺寸。使用HTML5圖像naturalWidth和naturalHeight屬性,能夠很容易地找到圖像的原始的寬度和高度。
推薦參考:《JAVAScript教程》
那么在前面的文章中,已經給大家介紹過JS獲取圖片當前寬高的方法,其實與獲取原始寬高的方法類似,需要的朋友可以先行參考。
下面我們就繼續結合具體的代碼示例,給大家介紹js獲取原始圖片尺寸大小的方法。
代碼示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>js獲取圖片原始寬高的示例</title>
<script type="text/JavaScript">
function imgSize(){
var myImg = document.querySelector("#sky");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
alert("原始 width=" + realWidth + ", " + "原始 height=" + realHeight);
}
</script>
</head>
<body>
<img src="./1/png" id="sky" style=" width:250px;" >
<p><button type="button" onclick="imgSize();">獲取</button></p>
</body>
</html>
不同于獲取圖片當前寬高的clientWidth和clientHeight屬性,獲取圖片原始尺寸主要是通過naturalWidth和naturalHeight屬性。這兩個屬性獲取的圖片原始寬高,不會因外部width和height屬性設置的改變而改變。
這里我們使用的圖片,原始寬高如下:716x565px;
那么用上述js代碼獲取圖片原始尺寸結果如下圖所示:
注:querySelector() 方法返回文檔中匹配指定 css 選擇器的一個元素。querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素,請使用 querySelectorAll() 方法替代。
本篇文章就是關于js獲取圖片原始寬高的方法介紹,也很簡單,希望對需要的朋友有所幫助!