如何跨瀏覽器確定原​​始圖像大小？

跨瀏覽器決定原始影像大小

在Web 開發中，在客戶端調整影像大小是最佳化頁面效能和回應能力的常見做法。然而，由於瀏覽器不一致，確定調整大小後的圖像的原始物理尺寸可能具有挑戰性。本文探討了兩種可靠的、獨立於框架的選項來獲取此資訊。

選項 1：使用 OffsetWidth 和 OffsetHeight

此方法涉及刪除明確寬度和高度屬性來自 元素。隨後，您可以存取 offsetWidth 和 offsetHeight 屬性來檢索調整大小後的圖像的實際寬度和高度。這個選項很簡單，大多數主流瀏覽器都支援。

選項2：使用JavaScript 影像對象

第二種方法涉及建立JavaScript 影像對象，設定其src 屬性到影像的來源，並存取其寬度和高度屬性。請注意，無需將圖像添加到頁面即可實現此功能。

以下是示例代碼片段：

<code class="javascript">function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert('The image size is ' + width + '*' + height);
    }

    newImg.src = imgSrc; // This must be done after setting onload
}</code>

Pekka 編輯：

為了保證大圖的結果準確，可以使用圖片的onload事件來觸發該函數。否則，在圖像載入完成之前，高度和寬度可能不可用。

以上是如何跨瀏覽器確定原​​始圖像大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！