首頁 > web前端 > js教程 > 如何在WebKit瀏覽器中準確取得真實影像尺寸?

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

Linda Hamilton
發布: 2024-12-17 12:13:25
原創
567 人瀏覽過

How to Accurately Get Real Image Dimensions in WebKit Browsers?

在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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板