在 JavaScript 中獲取影象尺寸

Tahseen Tauseef 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中使用 widthheight 屬性獲取影象尺寸
  2. 在 JavaScript 中使用 naturalWidthnaturalHeight 獲取影象尺寸
在 JavaScript 中獲取影象尺寸

有時,在將影象上傳到託管伺服器或使用它之前,我們可能需要檢查或驗證影象的尺寸,即影象的高度和寬度。我們可能需要檢查其尺寸以調整大小、裁剪或更改影象。

我們可以使用 JavaScript 輕鬆地做到這一點。

在本文中,我們將學習如何使用 JavaScript 獲取影象的尺寸或檢查影象的高度和寬度。

在 JavaScript 中使用 widthheight 屬性獲取影象尺寸

我們可以使用 JavaScript 中的 widthheight 屬性快速獲取影象的尺寸。下面的程式將向我們展示這一點。

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 中使用 naturalWidthnaturalHeight 獲取影象尺寸

在處理影象尺寸時,始終強烈建議我們計算出影象的真實寬度和高度。

因此,我們將考慮使用 naturalWidthnaturalHeight 屬性來使用 JavaScript 檢索影象的確切尺寸。

naturalWidthnaturalHeight 是隻讀屬性,它們用於找出影象的原始寬度和高度。

我們可能會使用 img 標籤的 widthheight 元素來更改我們網頁上顯示的影象的高度和寬度。naturalWidthnaturalHeight 屬性用於需要影象的原始寬度或高度的情況。

<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>

輸出:

使用 Naturalheight 和 Naturalwidth 的影象尺寸

在使用這種方法時,我們可能會得到非常不一致的結果。在直接找到影象的尺寸之前考慮這兩種情況也很重要。

影象可能沒有被獲取,在這種情況下嘗試獲取尺寸會給我們錯誤的輸出。

首先,我們必須確保影象已載入。我們還需要檢查影象是否從瀏覽器的快取中載入。

問題源於內部,即 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 事件。

相關文章 - JavaScript Image