在 JavaScript 中獲取影象尺寸
有時，在將影象上傳到託管伺服器或使用它之前，我們可能需要檢查或驗證影象的尺寸，即影象的高度和寬度。我們可能需要檢查其尺寸以調整大小、裁剪或更改影象。
我們可以使用 JavaScript 輕鬆地做到這一點。
在本文中，我們將學習如何使用 JavaScript 獲取影象的尺寸或檢查影象的高度和寬度。
在 JavaScript 中使用 width 和 height 屬性獲取影象尺寸
我們可以使用 JavaScript 中的 width 和 height 屬性快速獲取影象的尺寸。下面的程式將向我們展示這一點。
var i = new Image();
i.src =
'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/2560px-Image_created_with_a_mobile_phone.png';
i.onload = function() {
alert(this.width + 'x' + this.height);
}
輸出：
我們使用 new Image() 建構函式在上面的程式中建立了一個影象物件。然後，Image() 建構函式建立了一個新的影象元素例項。
然後使用影象 URL 源新增 i.src 圖片，並使用 i.onload() 方法確定影象的高度和寬度。
然而，這個程式只顯示頁面上呈現的 img 元素的大小，而不是影象的自然高度和寬度。
在 JavaScript 中使用 naturalWidth 和 naturalHeight 獲取影象尺寸
在處理影象尺寸時，始終強烈建議我們計算出影象的真實寬度和高度。
因此，我們將考慮使用 naturalWidth 和 naturalHeight 屬性來使用 JavaScript 檢索影象的確切尺寸。
naturalWidth 和 naturalHeight 是隻讀屬性，它們用於找出影象的原始寬度和高度。
我們可能會使用 img 標籤的 width 和 height 元素來更改我們網頁上顯示的影象的高度和寬度。naturalWidth 和 naturalHeight 屬性用於需要影象的原始寬度或高度的情況。
<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="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/2560px-Image_created_with_a_mobile_phone.png" id="sky" width="250" alt="Cloudy Sky">
<p><button type="button" onclick="imgSize();">Get Original Image Size</button></p>
</body>
</html>
輸出：
在使用這種方法時，我們可能會得到非常不一致的結果。在直接找到影象的尺寸之前考慮這兩種情況也很重要。
影象可能沒有被獲取，在這種情況下嘗試獲取尺寸會給我們錯誤的輸出。
首先，我們必須確保影象已載入。我們還需要檢查影象是否從瀏覽器的快取中載入。
問題源於內部，即 JavaScript 執行時。如果 JavaScript 在該影象完全下載和渲染之前執行，則結果將為 0。
但是，如果 JavaScript 在影象下載和渲染後執行，結果將是正確的。
<html>
<head>
<title>Title of the Document</title>
<style>
img {
margin: 20px;
}
</style>
</head>
<body>
<div>Click on img to see the result</div>
<script>
let img = document.createElement('img');
img.id = 'imgId';
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/2560px-Image_created_with_a_mobile_phone.png';
document.body.appendChild(img);
img.addEventListener("click", imgSize);
function imgSize() {
let img = document.getElementById('imgId');
let width = img.clientWidth;
let height = img.clientHeight;
alert("Original width=" + width + ", " + "Original height=" + height);
}
</script>
</body>
</html>i.addEventListener('load', function() {
console.log('Width: ', this.naturalWidth);
console.log('Height: ', this.naturalHeight);
});
此連結將提供上述示例中使用的程式碼。
我們能做的最低限度是在測量之前確保影象已經載入。影象完成後會發出一個 load 事件，你可以使用回撥來進行測量。
我們還將進行一些錯誤處理，因為影象可以發出一個 error 事件。