跨瀏覽器揭示客戶端調整大小圖像的原始尺寸

確定已在客戶端調整大小的圖像的真實尺寸side 是許多Web 開發場景的關鍵任務。無論您是調整影像以實現響應式佈局，還是向使用者顯示原始尺寸，找到一個跨瀏覽器一致工作的可靠解決方案至關重要。

選項 1：釋放 OffsetWidth 和 OffsetHeight

一種方法涉及從 元素中刪除寬度和高度屬性並檢索其 offsetWidth 和 offsetHeight。此技術消除了 CSS 樣式覆蓋原始尺寸的可能性。

const img = document.querySelector('img');
img.removeAttribute('width');
img.removeAttribute('height');
const width = img.offsetWidth;
const height = img.offsetHeight;

選項 2：利用 JavaScript 映像物件

另一種方法是利用 JavaScript 映像物件。建立一個 Image 對象，將圖像來源指派給其 src 屬性，並在映像載入後直接存取其寬度和高度屬性。

const newImg = new Image();
newImg.onload = function() {
  const width = newImg.width;
  const height = newImg.height;
  // Display the dimensions in an alert for demonstration
  alert(`Original image size: ${width}px * ${height}px`);
};
newImg.src = imgSrc; // Important to set after attaching the onload handler

記得要承認事件處理的重要性。對於大映像，使用不含 onload 事件的選項 2 中的方法可能會導致空結果，因為在程式碼執行執行時映像可能尚未載入。

透過採用這些與瀏覽器無關的技術，您可以放心地使用確定調整後影像的真實尺寸，從而為您的 Web 應用程式提供更高的精度和靈活性。