如果是在預先載入的情況下，即沒有把圖片插入DOM樹，它沒有受到CSS規則的影響，直接取其img.width與img.height就行了。可以參考〈a href="http://www.cnblogs.com/rt0d/archive/2011/04/17/2018646.html"〉這一篇博文，做得相當棒了。
function loadImage(url, callback) { var img = new Image(); img.onload = function(){ img.onload = null; callback.call(img,img.width,img.height) } img.src = url; }
<br /><!doctype html><br /><html><br /> <head><br /> <title>預先載入圖片 by 司徒正美 </title></p><p> <style><br /> #image {<br /> width:200px;<br /> height:200px;<br /> }<br /> </style><br /> <script></p><p> function loadImage(url, callback) {<br /> var img = new Image();<br /> img.onload = function(){<br /> img.onload = null;<br /> callback.call(img,img.width,img.height)<br /> }<br /> img.src = url;<br /> }<br /> loadImage("http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg",function(w,h){<br /> alert([w,h])<br /> })<br /> </script><br /> </head><br /> <body></p><p> </body><br /></html><br />
運行代碼
但如果在DOM樹建完之後，取得某一圖片原來的尺寸，在safari,firefox,chrome,與opera10+中，有兩個便捷的屬性（naturalWidth，naturalHeight）可以做到這一點。
<br /><!doctype html><br /><html><br /> <head><br /> <title>擷取圖片原來的尺寸 by 司徒正美</title><br /> <script><br /> window.onload = function(){<br /> var img = document.getElementById("img");<br /> alert(img.width + '*' + img.height); // 真實應用到的尺寸<br /> alert(img.naturalWidth + '*' + img.naturalHeight); // 原來的尺寸<br /> }<br /> </script><br /> <style><br /> div {<br /> width: 200px;<br /> height: 200px;<br /> }<br /> div img{<br /> border: 3px solid salmon;<br /> margin: 2pt;<br /> width: 87%;<br /> height: 9em;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div><br /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg" id="img" /><br /> </div><br /> </body><br /></html></p><p>
運行代碼
對於IE與opera的早期版本，就沒有這麼幸運了，我們需要轉換視角，從求當前圖片的原來尺寸，變為求另一個同URL的圖片的尺寸
function getActualSize(img){ var testee = new Image;//弄一個替身 testee.style.position = 'absolute'; testee.style.visibility = 'hidden'; testee.style.top = testee.style.left = '0px'; document.body.appendChild(testee); testee.src = img.src; var width = testee.width; var height = testee.height; testee.parentNode.removeChild(testee); return {width:width, height:height}; }
<br /><!doctype html><br /><html><br /> <head><br /> <title>擷取圖片原來的尺寸 by 司徒正美</title><br /> <script></p><p> function getActualSize(img){<br /> var testee = new Image;//弄一個替身<br /> testee.style.position = 'absolute';<br /> testee.style.visibility = 'hidden';<br /> testee.style.top = testee.style.left = '0px';<br /> document.body.appendChild(testee);<br /> testee.src = img.src;<br /> var width = testee.width;<br /> var height = testee.height;<br /> testee.parentNode.removeChild(testee);<br /> return {width:width, height:height};<br /> }</p><p> window.onload = function(){<br /> var img = document.getElementById("img");<br /> var size = getActualSize(img);<br /> alert([size.width,size.height])<br /> }</p><p> </script><br /> <style><br /> div {<br /> width: 200px;<br /> height: 200px;<br /> }<br /> div img{<br /> border: 3px solid salmon;<br /> margin: 2pt;<br /> width: 87%;<br /> height: 9em;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div><br /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg" id="img" /><br /> </div><br /> </body><br /></html><br />
運行代碼
此法雖然因為緩衝而不會再發請求，但需要多建立一個元素作為測量對象，開銷比較大。有沒有更好的辦法呢？我們可以考慮一下IE的那三組樣式屬性了，style，currentStyle與runtimeStyle。眼下，我們只需用到runtimeStyle。它有個特點是，不用同步style就能重繪原來的元素。我們可以直接在runtimeStyle進行設定，然後取得相關值，再重設回去就行了。
function getActualSize(img) { var run = img.runtimeStyle; var mem = { w: run.width, h: run.height }; //儲存原來的尺寸 run.width = run.height = "auto";//重寫 var w = img.width;//取得現在的尺寸 var h = img.height; run.width = mem.w; //還原 run.height = mem.h; return {width:w, height:h}; }
<br /><!doctype html><br /><html><br /> <head><br /> <title>擷取圖片原來的尺寸 by 司徒正美</title><br /> <script></p><p> function getActualSize(img) {<br /> var run = img.runtimeStyle;<br /> var mem = { w: run.width, h: run.height }; //儲存原來的尺寸<br /> run.width = run.height = "auto";//重寫<br /> var w = img.width;//取得現在的尺寸<br /> var h = img.height;<br /> run.width = mem.w; //還原<br /> run.height = mem.h;<br /> return {width:w, height:h};<br /> }</p><p> window.onload = function(){<br /> var img = document.getElementById("img");<br /> var size = getActualSize(img);<br /> alert([size.width,size.height])<br /> }</p><p> </script><br /> <style><br /> div {<br /> width: 200px;<br /> height: 200px;<br /> }<br /> div img{<br /> border: 3px solid salmon;<br /> margin: 2pt;<br /> width: 87%;<br /> height: 9em;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div><br /> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg" id="img" /><br /> </div><br /> </body><br /></html><br />
運行代碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
