JS怎麼取得圖片原始寬高-html知識-PHP中文網

首頁

每日程式設計

html知識

JS怎麼取得圖片原始寬高

藏色散人

Dec 14, 2018 pm 04:13 PM

JS取得圖片原始寬高即圖片原始尺寸，我們可以透過HTML5 naturalWidth和naturalHeight屬性來取得圖片原始尺寸。使用HTML5圖像naturalWidth和naturalHeight屬性，能夠輕鬆找到圖像的原始的寬度和高度。

推薦參考：《JavaScript教學》

JS怎麼取得圖片原始寬高

#那麼在前面的文章中，已經介紹過大家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="/static/imghwm/default1.png"  data-src="./1/png"  class="lazy"   id="sky"   style="max-width:90%"  alt="JS怎麼取得圖片原始寬高" >
<p><button type="button" onclick="imgSize();">获取</button></p>
</body>
</html>

不同於取得圖片目前寬高的clientWidth和clientHeight屬性，取得圖片原始尺寸主要是透過naturalWidth和naturalHeight屬性。這兩個屬性所取得的圖片原始寬高，不會因外部width和height屬性設定的改變而改變。

這裡我們使用的圖片，原始寬高如下：716x565px;

JS怎麼取得圖片原始寬高