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