如何在WebKit瀏覽器中準確取得真實影像尺寸？

在WebKit 瀏覽器中擷取真實影像尺寸

嘗試在WebKit 瀏覽器中使用JavaScript 來確定影像的實際寬度和高度，例如Safari 或Chrome 通常會導致零值。這是因為 WebKit 僅在映像完全載入後更新這些屬性。

要克服此限制，我們建議使用映像的 onload 事件而不是逾時。這種方法使我們能夠更準確地檢索實際尺寸：

var img = $("img")[0]; // Retrieve the image element
var pic_real_width, pic_real_height;

$("<img/>") // Create an in-memory copy to prevent CSS interference
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width; // Note: $(this).width() won't work for in-memory images.
        pic_real_height = this.height;
    });

此技術可確保我們檢索實際圖像尺寸而不受 CSS 樣式的任何干擾。

另一個選擇是利用HTML5 屬性naturalHeight 和naturalWidth。這些屬性提供了圖像固有的、無樣式的尺寸，無論 CSS 操作如何：

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

透過實現這些方法，我們可以在 Safari 和 Chrome 等 WebKit 瀏覽器中準確存取圖像的真實尺寸。

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