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