首頁 >web前端 >js教程 >儘管瀏覽器調整大小,如何決定原始影像尺寸?

儘管瀏覽器調整大小,如何決定原始影像尺寸?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-10-18 18:24:03467瀏覽

How to Determine Original Image Dimensions Despite Browser Resize?

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

確定已在客戶端調整大小的圖像的原始尺寸可以是由於瀏覽器不一致而面臨挑戰。但是,您可以考慮一些可靠的、獨立於框架的選項:

選項1:刪除屬性並讀取偏移量

從以下位置刪除寬度和高度屬性圖像標籤。這允許您讀取 offsetWidth 和 offsetHeight 屬性來取得影像的實際物理尺寸。

選項 2:建立 JavaScript 映像物件

建立 JavaScript 映像物件並將其 src 屬性設定為映像來源。然後,讀取物件的寬度和高度屬性。您無需將圖像添加到頁面即可使此方法發揮作用。以下是一個範例函數:

<code class="html">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;
}</code>

注意: 正如評論中提到的,在圖像的onload 事件上運行該函數非常重要,以確保圖像之前完全加載嘗試讀取它的尺寸。

以上是儘管瀏覽器調整大小,如何決定原始影像尺寸?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn