使用js獲取圖片原始尺寸
更新時(shí)間：2014年12月03日 09:38:19 投稿：hebedich
本文給大家推薦的是一個(gè)使用js獲取圖片的原始尺寸的例子，從本人項(xiàng)目中摳出來(lái)的，這里奉獻(xiàn)給大家，有需要的直接拿走。
瀏覽器中顯示的圖片大小未必是他真實(shí)的高和寬，比如像下面這樣，我們給他加上寬和高的樣式
<img src="IE.png" style="width:25px;height:25px;">
這樣在瀏覽器中顯示的大小就是25px。那么我們?nèi)绾潍@取圖片的真實(shí)大小呢？，下面的代碼就實(shí)現(xiàn)了這個(gè)功能
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<img src="IE.png" id="image" style="width:25px;height:25px;">
<script>
// 設(shè)置延時(shí)保證圖片加載完成
setTimeout(function() {
var
real_width,
real_height,
_im = document.getElementById('image'),
im = document.createElement('img');
im.src = _im.src,
real_width = im.width,
real_height = im.height;
alert(real_width+'\n'+real_height);
},500);
</script>
</body>
</html>
注意：上面代碼本人在IE7+和chrome上都測(cè)試過(guò)了，因?yàn)闆](méi)有裝IE6，所以沒(méi)法測(cè)試。
非常好用的代碼，本人大多數(shù)項(xiàng)目中都在使用，大家放心用吧
相關(guān)文章
這篇文章主要通過(guò)動(dòng)畫(huà)的示例來(lái)為大家詳細(xì)介紹一下JavaScript的函數(shù)封裝，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下2022-03-03
3種js實(shí)現(xiàn)string的substring方法
這篇文章主要介紹了3種javascript實(shí)現(xiàn)string的substring方法，需要的朋友可以參考下2015-11-11
深入JavaScript高級(jí)程序設(shè)計(jì)之對(duì)象、數(shù)組（棧方法，隊(duì)列方法，重排序方法，迭代方法）
這篇文章主要介紹了深入JavaScript高級(jí)程序設(shè)計(jì)之對(duì)象、數(shù)組（棧方法，隊(duì)列方法，重排序方法，迭代方法）的相關(guān)資料,需要的朋友可以參考下2015-12-12
關(guān)于Aptana Studio生成自動(dòng)備份文件的解決辦法
關(guān)于Aptana Studio生成自動(dòng)備份文件的解決辦法2009-12-12
前端一直是距離用戶最近的一層,隨著產(chǎn)品的日益完善,我們會(huì)更加注重用戶體驗(yàn),而前端異常卻如鯁在喉,甚是煩人,下面這篇文章主要給大家推薦介紹了關(guān)于優(yōu)雅處理前端異常的幾種方式,需要的朋友可以參考下2022-08-08
window.onload 加載完畢的問(wèn)題及解決方案（上）
我們經(jīng)常使用 window.onload 來(lái)處理頁(yè)面，當(dāng)頁(yè)面加載完成做一些事情。但這個(gè) window.onload 是頁(yè)面全部加載完成，甚至包括圖片，而我們實(shí)際上經(jīng)常需要的是文檔 DOM 加載完畢！2009-07-07
JavaScript簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)拖動(dòng)選擇功能
本篇文章主要是對(duì)JavaScript簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)拖動(dòng)選擇功能的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
這篇文章主要介紹了通過(guò)實(shí)例講解JS如何防抖動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
JS實(shí)現(xiàn)的小火箭發(fā)射動(dòng)畫(huà)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的小火箭發(fā)射動(dòng)畫(huà)效果,涉及javascript基于時(shí)間函數(shù)的頁(yè)面元素屬性動(dòng)態(tài)變換實(shí)現(xiàn)運(yùn)動(dòng)效果相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
在JavaScript中,將年月日轉(zhuǎn)換為時(shí)間戳可以通過(guò)多種方式實(shí)現(xiàn),下面給大家分享JS把年月日轉(zhuǎn)為時(shí)間戳的操作方法,感興趣的朋友跟隨小編一起看看吧2024-08-08