」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 客戶端跨瀏覽器調整大小後如何確定原始影像大小?

客戶端跨瀏覽器調整大小後如何確定原始影像大小?

發佈於2024-11-09
瀏覽:719

How to Determine the Original Image Size After Client-Side Resizing Across Browsers?

跨瀏覽器確定原​​始圖像尺寸

確定已在客戶端調整大小的圖像的原始物理尺寸可以是跨瀏覽器挑戰。但是,有可靠且獨立於框架的方法可以實現此目的:

選項1:動態影像尺寸讀取

從映像HTML 中刪除任何預先定義的寬度和高度屬性元素。系統將自動調整尺寸以適應顯示需求。隨後,利用 JavaScript 存取元素的 offsetWidth 和 offsetHeight 屬性,它們代表調整後的寬度和高度。

選項 2:JavaScript 映像物件

建立 JavaScript 映像物件並將調整大小的映像的來源指派給其 src 屬性。載入圖像後,物件的寬度和高度屬性將保持原始尺寸。您可以利用 onload 事件非同步執行此操作,確保在檢索尺寸之前圖片已完全載入。

程式碼範例:

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; // Do this after setting `onload`
}

注意: 如果遇到大圖像不回傳尺寸的問題,請考慮在 JavaScript 物件中使用 onload 事件。這可確保圖像在存取其屬性之前已完全載入。

版本聲明 本文轉載於:1729247237如有侵犯,請洽[email protected]刪除
最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3