用JavaScript獲取原始圖片尺寸
在專案開發中,經常會遇到要出來圖片的問題,圖片大小?圖片自適應頁面,保證圖片不變形,按比例縮放等等,所以獲取圖片的原始大小是一個非常重要的參考要訣。
頁面裡的img元素,想要獲取它的原始尺寸,以寬度為例可能首先想到的就是width,如下:
<imgsrc="http://img11.360buyimg.com/da/g14/M07/01/0E/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs716.jpg">
<script>
var img = document.getElementsByTagName('img')[0]
var width = getWH(img, 'width') // 690
</script>
這裡使用的getWH方法是之前文章裡提到的。這時候獲取的寬度和圖片的原始尺寸是一樣的。
如果給img加上了width屬性,這種方式就不行了,比如圖片實際寬度是690,設定了width為400,這時按上面的方式獲取則返回400。
<img width="400" src="http://img11.360buyimg.com/da/g14/M07/01/0E/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs716.jpg">
<script>
var img = document.getElementsByTagName('img')[0]
var width = getWH(img, 'width') // 400
</script>
很明顯,400不是圖片的原始寬度。
有一種方式可以獲取到,直接建立一個新img物件,然後把舊img的src賦值給新的,這時候獲取新img的寬度即可。
<img width="400"src="http://img11.360buyimg.com/da/g14/M07/01/0E/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs716.jpg">
<script>
function getNaturalWidth(img) {
var image = new Image()
image.src = img.src
varnaturalWidth = image.width
return naturalWidth
}
var img =document.getElementsByTagName('img')[0]
getNaturalWidth(img) // 690
</script>
需要注意的是,這裡新建立的image是不需要新增的DOM文件裡的。
HTML5提供了一個新屬性naturalWidth
/naturalHeight
可以直接獲取圖片的原始寬高。這兩個屬性在Firefox/Chrome/Safari/Opera及IE9裡已經實現。改造下獲取圖片尺寸的方法。
function getImgNaturalDimensions(img,callback) {
var nWidth, nHeight
if (img.naturalWidth) { // 現代瀏覽器
nWidth = img.naturalWidth
nHeight = img.naturalHeight
}else { // IE6/7/8
var imgae = new Image()
image.src = img.src
image.onload = function() {
callback(image.width, image.height)
}
}
return [nWidth, nHeight]
}
注意IE6/7/8的處理,建立了一個新的img,僅設定其src,這時需要讓圖片完全載入後才可以獲取其寬高。因此這裡是非同步的,可以傳一個回撥,回撥裡把原始的寬高作為引數傳入。
本文為Anyforweb技術分享部落格,需要了解網站建設及更多Web應用相關資訊,請訪問anyforweb.com。
相關文章
- javascript如何獲取img圖片的尺寸JavaScript
- 獲取img圖片原始尺寸程式碼例項
- JavaScript獲取img的原始尺寸JavaScript
- 如何用JavaScript獲取圖片的真實尺寸大小JavaScript
- Java——獲取圖片尺寸和大小Java
- js如何獲取圖片的長寬尺寸JS
- js如何獲取圖片的真實尺寸JS
- javascript中獲取元素尺寸JavaScript
- JavaScript獲取背景圖片定位值JavaScript
- javascript如何獲取圖片的高度JavaScript
- javascript獲取螢幕的尺寸JavaScript
- PHP獲取圖片寬度高度、大小尺寸、圖片型別、用於佈局的img屬性PHP型別
- JavaScript獲取圖片的真實大小JavaScript
- javascript獲取window視窗的尺寸JavaScript
- js獲取上傳圖片尺寸和格式程式碼例項JS
- jquery獲取圖片的實際尺寸大小程式碼例項jQuery
- 通過url獲取圖片尺寸的幾種方法:JS和phpJSPHP
- javascript如何獲取指定元素內的所有圖片JavaScript
- 獲取app 圖片APP
- javascript如何獲取電腦螢幕的尺寸JavaScript
- javascript獲取圖片的真實寬度和高度JavaScript
- 利用javascript獲取圖片的top N主色值JavaScript
- 谷歌瀏覽器下jquery無法獲取圖片的尺寸解決方案谷歌瀏覽器jQuery
- java開發_比較使用ImageReader和BufferedImage獲取圖片尺寸總結Java
- javascript獲取瀏覽器視窗尺寸程式碼片段JavaScript瀏覽器
- app直播原始碼,Vue獲取URL圖片的寬高APP原始碼Vue
- 獲取本地圖片/視訊地圖
- iOS 獲取視訊圖片iOS
- 【API】隨機獲取圖片API隨機
- javascript圖片上傳格式尺寸等特徵驗證效果JavaScript特徵
- IE瀏覽器下js無法獲取隱藏圖片尺寸簡單介紹瀏覽器JS
- javascript獲取移動裝置螢幕尺寸的程式碼JavaScript
- javascript獲取網頁和螢幕尺寸相關屬性JavaScript網頁
- javascript獲取瀏覽器視口尺寸程式碼例項JavaScript瀏覽器
- JavaScript獲取瀏覽器、元素、螢幕的寬高尺寸JavaScript瀏覽器
- 成品直播原始碼,JAVA獲取圖片的寬、高和大小原始碼Java
- 直播軟體原始碼,Vue獲取URL圖片的寬高原始碼Vue
- HTML5獲取圖片的原始高度簡單介紹HTML