使用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>
// 設(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上都測試過了，因為沒有裝IE6，所以沒法測試。
非常好用的代碼，本人大多數(shù)項目中都在使用，大家放心用吧
相關(guān)文章
這篇文章主要為大家詳細介紹了JS+Canvas繪制抽獎轉(zhuǎn)盤，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
而來到CoffeeScript的世界，美妙故事再次上演。在寫了幾行代碼后我相信你將不會再想念原生的Javascript了。CoffeeScript包含了許多新特性，當將它與jQuery，node.js,javascript結(jié)合時，你會發(fā)現(xiàn)一片新天地。2015-08-08
這篇文章主要介紹了js中關(guān)于Blob對象的介紹與使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了理解JavaScript中的適配器模式,適配器模式即Adapter Pattern，是作為兩個不兼容的接口之間的橋梁。這種類型的設(shè)計模式屬于結(jié)構(gòu)型模式，下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-08-08
html 5.0的canvas可以獲取到圖片的像素點了。這樣，我們可以做很多以圖片有關(guān)的操作和渲染了。當然今后也會給瀏覽器渲染引擎更高的要求。（YY, 什么時候html渲染引擎也支持多核和GPU呢？）2009-04-04
JavaScript實現(xiàn)移動端短信驗證碼流程介紹
這篇文章主要為大家詳細介紹了javascript實現(xiàn)移動端發(fā)送短信驗證碼案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-10-10
下面小編就為大家?guī)硪黄猨s實現(xiàn)(全選)多選按鈕的方法【附實例】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-03-03
xmlHTTP返回值重編碼的優(yōu)化...2006-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)抽獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
javascript 操作符（~、&、|、^、<<、>>）使用案例
這篇文章主要介紹了javascript 操作符（~、&、|、^、<<、>>）使用案例,非常的全面，需要的朋友可以參考下2014-12-12