在網站開發過程中，我們經常需要獲取圖片的尺寸來進行處理和顯示。JavaScript是一種廣泛使用的客戶端腳本語言，它可以通過一些簡單的代碼來獲取圖片的尺寸。本文將介紹如何通過JavaScript獲取圖片尺寸，并通過實例進行說明。 獲取圖片尺寸的方法 獲取圖片尺寸的方法有多種方式，下面將介紹三種常用的方式。 1. 通過Image對象獲取圖片尺寸 在JavaScript中，可以通過Image對象創建一個圖片對象，然后獲取圖片的寬高，代碼如下所示：

var img = new Image();
img.src = 'example.jpg';
img.onload = function() {
console.log('圖片寬度：' + img.width + ' 圖片高度：' + img.height);
}

這段代碼中，首先創建了一個Image對象，然后將圖片路徑賦值給img的src屬性。當圖片加載完成后，會觸發onload事件，然后可以通過img.width和img.height來獲取圖片的寬高。 2. 通過文件讀取器獲取圖片尺寸 在HTML5中，可以通過FileReader對象來讀取本地文件，包括圖片文件。代碼如下所示：

var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
console.log('圖片寬度：' + img.width + ' 圖片高度：' + img.height);
}
img.src = event.target.result;
}
reader.readAsDataURL(file);

這段代碼中，首先創建了一個FileReader對象，通過監聽onload事件，獲取加載完成后的base64編碼數據。然后創建一個Image對象，通過img.onload事件獲取圖片寬高，最后將base64數據賦值給img的src屬性。 3. 通過CSS樣式獲取圖片尺寸 在HTML中，可以使用標簽來顯示圖片，同時可以通過CSS來設置圖片的寬高。如果不設置寬高，那么圖片將以原始尺寸顯示。代碼如下所示：

var img = document.getElementById('img');
console.log('圖片寬度：' + img.offsetWidth + ' 圖片高度：' + img.offsetHeight);

這段代碼中，首先通過getElementById()方法獲取img標簽對象，然后通過offsetWidth和offsetHeight屬性來獲取圖片寬高。 總結： 通過上述三種方式，可以輕松地獲取圖片的尺寸。不同的方法適用于不同的場景，可以根據具體的情況選擇適合自己的方式。當然，在實際開發中，還需要考慮一些細節問題，比如圖片的加載速度等。希望本文可以幫助讀者更好地理解JavaScript獲取圖片尺寸的方法。