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

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

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

選項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 事件。這可確保圖像在存取其屬性之前已完全載入。

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