如何在WebKit瀏覽器（Safari和Chrome）中準確檢索影像尺寸？

在Webkit 瀏覽器（Safari、Chrome）中檢索準確的圖像尺寸

在Javascript 圖像操作領域，獲取圖像的真實寬度和高度可能會帶來挑戰，特別是在Safari 和Chrome 等Webkit 瀏覽器中。

問題概述

在Firefox 3、IE7 和Opera 9 中使用jQuery 時，以下程式碼片段可以有效擷取實際影像尺寸：

var pic = $("img");
pic.removeAttr("width");
pic.removeAttr("height");
var pic_real_width = pic.width();
var pic_real_height = pic.height();

但是，在Webkit瀏覽器中，這種方法會產生不正確的結果值為0。

解決方案：Javascript 的映像載入事件

解決方案關鍵在於利用映像元素的onload事件。下面修改後的程式碼可以實現此目的：

var img = $("img")[0]; // Get the image element

$("<img/>") // Make a virtual copy of the image to prevent CSS interference
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;
        pic_real_height = this.height;
    });

透過建立圖片的記憶體副本並在載入事件中使用 this 關鍵字，我們繞過了任何可能改變圖片尺寸的潛在 CSS 效果。

替代方案：HTML5 圖片屬性

為了與 HTML5 瀏覽器相容，您也可以利用 naturalHeight 和 naturalWidth屬性：

var pic_real_width = img.naturalWidth;
var pic_real_height = img.naturalHeight;

以上是如何在WebKit瀏覽器（Safari和Chrome）中準確檢索影像尺寸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！