以JavaScript取得圖片的真實尺寸大小的方法詳解

網頁頁面上的圖片尺寸似乎都千篇一律。我們最常見到的有多圖的文章頁面中，圖的大小通常是和頁面的寬度一致，這樣看起來，頁面就是一個直筒形，這樣的佈局看多了就會覺得很單調。之所以形成這樣的局面，我想很大程度上是因為老式瀏覽器的限制。但隨著現代瀏覽器(火狐/Google/IE11)的普及，瀏覽器對頁面設計的限制越來越少，Web程式設計師的想像能力能夠得到極大的發揮。

例如，冷知識：你知道每個視窗都有的 [x] 是怎麼來的嗎？在這篇文章中，許多圖片超出了文字寬度的限制，給人一種參差錯落的感覺，同時，讓大圖片以其真實的尺寸展示，給人以更震撼的感覺。

但從技術上，我們可以輕鬆的用文字的最大寬度限制圖片，讓它們都保持一個寬度，而不按文字的寬度時，我們就需要每個圖片的自己的尺寸。我們可以在服務端編輯時聲明圖片的原始尺寸。而一種更靈活的方式是透過在頁面上放置一段js來動態的獲取圖片的原始大小尺寸，動態改變圖片的顯示大小。這樣即能相容老的也文字最大寬度的方式，還可以在需要的時候讓圖片呈現出其原始的大小。

如何用JavaScript在瀏覽器端取得圖片的原始尺寸大小？

var img = $("#img_id"); // 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.
    });

Webkit瀏覽器(Google瀏覽器等)是圖片的loaded事件之後才能取得高度和寬度值。所以，你不能使用timeout函數延時等待，最好的方法就是使用圖片的onload事件。

為了避免CSS對圖片大小尺寸的影響，上面的程式碼將圖片拷貝到記憶體中進行計算。

如果你的頁面是老式頁面，你可以按需把這段程式碼嵌入頁面底部，它不需要你修改原有頁面。

參考stackoverflow

#推薦教學：《javascript基礎教學》

以上是以JavaScript取得圖片的真實尺寸大小的方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！