JavaScript獲取圖片的真實大小
網頁頁面上的圖片尺寸似乎都千篇一律。我們最常見到的帶有多圖的文章頁面中,圖的大小通常是和頁面的寬度一致,這樣看起來,頁面就是一個直筒形,這樣的佈局看多了就會覺得很單調。之所以形成這樣的局面,我想很大程度上是因為老式瀏覽器的限制。但隨著現代瀏覽器(火狐/谷歌/IE11)的普及,瀏覽器對頁面設計的限制越來越少,Web的想象能力能夠得到極大的發揮。
比如,冷知識:你知道每個視窗都有的 [x] 是怎麼來的嗎?這篇文章中,很多圖片超出了文字寬度的限制,給人一種參差錯落的感覺,同時,讓大圖片以其真實的尺寸展示,給人以更震撼的感覺。
但從技術上,我們可以輕鬆的用文字的最大寬度限制圖片,讓它們都保持一個寬度,而不按文字的寬度時,我們就需要每個圖片的自己的尺寸。我們可以在服務端編輯時宣告圖片的原始尺寸。而一種更靈活的方式是透過在頁面上放一段js來動態的獲取圖片的原始大小尺寸,動態改變圖片的顯示大小。這樣即能相容老的也文字最大寬度的方式,還可以在需要的時候讓圖片呈現出其原始的大小。
如何用JavaScript在瀏覽器端獲取圖片的原始尺寸大小?
var img = $(“#img_id”); // Get my img elem
var pic_real_width, pic_real_height;
$(“<img/>”) // Make in memory copy of image to avoid css issues
.attr(“src”, $(img).attr(“src”))
.load(function() {
pic_real_width = this.width; // Note: $(this).width() will not
pic_real_height = this.height; // work for in memory images.
});
Webkit瀏覽器(谷歌瀏覽器等)是在圖片的loaded事件之後才能獲取高度和寬度值。所以,你不能使用timeout函式延時等待,最好的方法是使用圖片的onload事件。
為了避免CSS對圖片大小尺寸的影響,上面的程式碼將圖片複製到記憶體中進行計算。
如果你的頁面是老式頁面,你可以按需把這段程式碼嵌入頁面底部,它不需要你修改原有頁面。
參考:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2459/viewspace-2803515/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 如何用JavaScript獲取圖片的真實尺寸大小JavaScript
- jquery獲取圖片的真實大小jQuery
- javascript獲取圖片的真實寬度和高度JavaScript
- js如何獲取圖片的真實尺寸JS
- 獲取網路圖片的大小
- Java——獲取圖片尺寸和大小Java
- javascript如何獲取圖片的高度JavaScript
- jquery獲取圖片的實際尺寸大小程式碼例項jQuery
- javascript如何獲取img圖片的尺寸JavaScript
- JavaScript獲取背景圖片定位值JavaScript
- 用JavaScript獲取原始圖片尺寸JavaScript
- asp 獲取圖片的 大小 和畫素 ,解析度,以及壓縮圖片
- 如何通過js和jquery獲取圖片真實的寬度和高度JSjQuery
- javascript如何獲取指定元素內的所有圖片JavaScript
- 成品直播原始碼,JAVA獲取圖片的寬、高和大小原始碼Java
- 利用javascript獲取圖片的top N主色值JavaScript
- 獲取app 圖片APP
- 通過url動態獲取圖片大小方法總結
- 獲取真實IP地址
- PHP獲取圖片寬度高度、大小尺寸、圖片型別、用於佈局的img屬性PHP型別
- 獲取SDWebImage下載的圖片Web
- 獲取使用者的真實ip
- 獲取本地圖片/視訊地圖
- iOS 獲取視訊圖片iOS
- 【API】隨機獲取圖片API隨機
- 計算表資料真實行長度獲得表真實大小
- javascript獲取視窗大小例項程式碼JavaScript
- nginx後端獲取真實ipNginx後端
- Apapche獲取真實IP地址方法
- 獲取客戶端真實ip客戶端
- laravel symfony request獲取真實ip的坑Laravel
- PHP 獲取使用者真實的ipPHP
- 如何獲取真實的執行計劃
- 獲取bitmap大小
- 一鍵批次獲取易貝商品圖片的實用技巧
- js如何獲取圖片的長寬尺寸JS
- 獲取遠端圖片的Blob資源
- 為何我的程式獲取不了圖片?