如何在 WebKit 瀏覽器中可靠地取得圖像尺寸？

在 Webkit 瀏覽器中確定圖像尺寸

在開發 JavaScript 外掛程式時，獲取圖像的實際寬度和高度至關重要。雖然傳統方法在 Firefox、IE 和 Opera 中有效，但在 Safari 和 Chrome 中失敗，傳回值為零。

WebKit 獨特的圖像載入行為

與與其他瀏覽器相比，Webkit 僅在載入圖像後才設定圖像的高度和寬度屬性。此行為需要採用不同的方法來檢索真實的影像尺寸。

利用圖片載入事件

建議的解決方案涉及使用圖片的 onload 事件。以下是解決問題的修改後的程式碼片段：

var img = $("img")[0]; // Get the image element
var pic_real_width, pic_real_height;
$("<img/>") // Create an in-memory copy to avoid CSS issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;
        pic_real_height = this.height;
    });

避免CSS 效果

為了防止CSS 效果影響尺寸，程式碼創建了一個in-圖像的記憶體副本。此技術可確保檢索到的值準確反映實際影像大小。

替代方法：HTML5 屬性

HTML5 提供了naturalHeight 和naturalWidth 屬性，也可以使用這些屬性來擷取真實影像尺寸。然而，不同瀏覽器對這些屬性的支援有所不同。

以上是如何在 WebKit 瀏覽器中可靠地取得圖像尺寸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！