jquery獲取圖片的真實大小

longmanma發表於2021-09-09

在前端中有許多時候希望顯示圖片的的真實大小的場景(如果圖片預覽這樣的場景),如果直接用選擇器把html中的img元素選擇出來然後輸出他的width()和height()的話,如果對img元素有做樣式限定的則輸出的是樣式中的高度和寬度,無法得出圖片的真實畫素大小。這裡可採用新建個圖片物件,然後直接載入(這裡可以用load載入)整個圖片然後在或者其高寬屬性即可。

如以下demo程式碼

$(document).ready(function(){        $("img").each(function () {    //獲取所有img元素,進行遍歷            $("<img />").attr("src", this.src).on("load", function () {     //這裡使用的jquery新建一個img物件進行新增attr屬性,把src新增上去,然後進行載入事件            var imgw = this.width;                     //這裡的width和height就是圖片實際的寬高了            var imgh = this.height;            alert("imgw:" + imgw + ',' + "imgh:" + imgh);        });    });});


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2730/viewspace-2817562/,如需轉載,請註明出處,否則將追究法律責任。

相關文章