如何在WebKit瀏覽器中準確取得圖片尺寸？-js教程-PHP中文網

如何在WebKit瀏覽器中準確取得圖片尺寸？

Mary-Kate Olsen

發布： 2024-12-07 07:03:12

原創

903 人瀏覽過

How Can I Accurately Get Image Dimensions in WebKit Browsers?

在Webkit 瀏覽器中準確檢索影像尺寸

在Safari 和Chrome 等Webkit 瀏覽器中測量影像的真實尺寸可能具有挑戰性。刪除內聯寬度和高度屬性以及測量圖像的實際尺寸等傳統方法無法考慮這些瀏覽器在圖像加載後設定尺寸的情況。

利用映像的 Onload 事件

更可靠的方法是利用映像的 onload 事件，而不是依賴逾時。這允許您在圖像完全加載後捕獲尺寸：

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

登入後複製

利用NaturalHeight 和NaturalWidth 屬性

現代瀏覽器支援HTML5 屬性naturalHeight 和natural🎜>

現代瀏覽器支援HTML5 屬性naturalHeight 和naturalEWidth，無論CCSSu ，它都能提供影像的真實尺寸。這種方法更簡潔：

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

登入後複製

透過利用這些技術，您可以在 Webkit 瀏覽器中準確檢索影像的真實寬度和高度，從而實現更精確的影像操作和顯示。

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