JS處理圖片寬高
JS快速獲取圖片寬高的方法
快速獲取圖片的寬高實際上是爲了預先作好排版樣式佈局作準備，經過快速獲取圖片寬高的方法比onload方法要節省不少時間，甚至一分鐘以上都有可能，而且這種方法適用主流瀏覽器包括IE低版本瀏覽器。html
咱們一步一步進入這個過程。html5
1、簡陋的獲取圖片方式
|
1
2
3
4
5
6
7
8
9
10
11
|
// 圖片地址 後面加時間戳是爲了不緩存
var
img_url =
'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'
+Date.parse(
new
Date());
// 建立對象
var
img =
new
Image();
// 改變圖片的src
img.src = img_url;
// 打印
alert(
'width:'
+img.width+
',height:'
+img.height);
|
執行：chrome
寬高都是0的這個結果很正常，由於圖片的相關數據都沒有被加載前它的寬高默認就是0瀏覽器
因而能夠這麼優化！緩存
2、onload後在打印
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 圖片地址 後面加時間戳是爲了不緩存
var
img_url =
'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'
+Date.parse(
new
Date());
// 建立對象
var
img =
new
Image();
// 改變圖片的src
img.src = img_url;
// 加載完成執行
img.onload =
function
(){
// 打印
alert(
'width:'
+img.width+
',height:'
+img.height);
};
|
執行：服務器
經過onload就能獲取到圖片的寬高了。但onload大一點的圖一般都比較慢，不實用，但只要圖片被瀏覽器緩存，那麼圖片加載幾乎就不用等待便可觸發onload，咱們要的是佔位符。因此有些人經過緩存獲取也能夠這麼寫。dom
3、經過complete與onload一塊兒混合使用
爲了測試緩存效果，注意如下測試圖片的url都不加時間戳異步
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
// 圖片地址
// 建立對象
var
img =
new
Image();
// 改變圖片的src
img.src = img_url;
// 判斷是否有緩存
if
(img.complete){
// 打印
alert(
'from:complete : width:'
+img.width+
',height:'
+img.height);
}
else
{
// 加載完成執行
img.onload =
function
(){
// 打印
alert(
'from:onload : width:'
+img.width+
',height:'
+img.height);
};
}
|
第一次執行，永遠是onload觸發函數
你再刷新，幾乎都是緩存觸發了佈局
從緩存裏讀取圖片的寬高不用說，很是方便快捷，今天咱們要解決的是沒有緩存而又快速的相比onload更快的方式去獲取圖片的寬高。咱們經常知道有些圖片雖然沒有徹底down下來，可是已經先有佔位符，而後一點一點的加載。既然有佔位符那應該是請求圖片資源服務器響應後返回的。可服務器何時響應並返回寬高的數據沒有觸發事件，好比onload事件。因而催生了第四種方法
4、經過定時循環檢測獲取
看看如下例子，爲了不從緩存裏讀取數據，每一次請求都帶時間戳：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// 圖片地址
var
img_url =
'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'
+Date.parse(
new
Date());
// 建立對象
var
img =
new
Image();
// 改變圖片的src
img.src = img_url;
// 定時執行獲取寬高
var
check =
function
(){
document.body.innerHTML +=
'<div>from:<span style="color:red;">check</span> : width:'
+img.width+
',height:'
+img.height+
'</div>'
;
};
var
set = setInterval(check,40);
// 加載完成獲取寬高
img.onload =
function
(){
document.body.innerHTML +=
'<div>from:<span style="color:blue">onload</span> : width:'
+img.width+
',height:'
+img.height+
'</div>'
;
// 取消定時獲取寬高
clearInterval(set);
};
|
FireFox
IE7 8 9 10
Chrome
經過以上測試，咱們發現定時檢測圖片寬高的方式要比onload快多了，打印的行數越多表示onload時間越長，40毫秒執行一次，基本100毫秒內就能獲取圖片的寬高，chrome甚至在第一次循環的時候就已經得到數據。從以上數據來分析，其實咱們能夠在定時函數裏判斷只要圖片的寬高都大於0就表示已經得到正確的圖片寬高。咱們把時間打上，來看看經過定時獲取寬高或者onload獲取寬高所須要多少時間。
代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// 記錄當前時間戳
var
start_time =
new
Date().getTime();
// 圖片地址
var
img_url =
'http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg?'
+start_time;
// 建立對象
var
img =
new
Image();
// 改變圖片的src
img.src = img_url;
// 定時執行獲取寬高
var
check =
function
(){
// 只要任何一方大於0
// 表示已經服務器已經返回寬高
if
(img.width>0 || img.height>0){
var
diff =
new
Date().getTime() - start_time;
document.body.innerHTML +=
'<div>from:<span style="color:red;">check</span> : width:'
+img.width+
',height:'
+img.height+
', time:'
+diff+
'ms</div>'
;
clearInterval(set);
}
};
var
set = setInterval(check,40);
// 加載完成獲取寬高
img.onload =
function
(){
var
diff =
new
Date().getTime() - start_time;
document.body.innerHTML +=
'<div>from:<span style="color:blue">onload</span> : width:'
+img.width+
',height:'
+img.height+
', time:'
+diff+
'ms</div>'
;
};
|
FireFox：
IE
Chrome
這是一張2560 * 1600大小的圖片，各瀏覽器執行結果都能看到經過快速獲取圖片大小的方法幾乎都在200毫秒之內，而onload至少五秒以上，這差異之大說明快速獲取圖片寬高很是實用。
五.html5新特性
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，這時須要讓圖片徹底載入後才能夠獲取其寬高。所以這裏是異步的，能夠傳一個回調，回調裏把原始的寬高做爲參數傳入。
- 1. 面試題：JS 獲取圖片寬高
- 2. JS獲取IMG圖片高寬
- 3. 獲取file上傳圖片的寬高（原圖片的寬高）
- 4. 圖片改變像素，寬高，Base64編碼處理
- 5. 保持圖片寬高比
- 6. 獲取圖片寬、高
- 7. iOS-圖片高級處理（3、圖片處理實踐）
- 8. JS 相關寬高理解
- 9. canvas的寬高處理
- 10. JS寬高度
- 更多相關文章...
- • PHP 圖像處理 - PHP參考手冊
- • PHP 獲取圖像寬度與高度 - PHP參考手冊
- • Docker 清理命令
- • ☆技術問答集錦（13）Java Instrument原理
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
- 1. 面試題：JS 獲取圖片寬高
- 2. JS獲取IMG圖片高寬
- 3. 獲取file上傳圖片的寬高（原圖片的寬高）
- 4. 圖片改變像素，寬高，Base64編碼處理
- 5. 保持圖片寬高比
- 6. 獲取圖片寬、高
- 7. iOS-圖片高級處理（3、圖片處理實踐）
- 8. JS 相關寬高理解
- 9. canvas的寬高處理
- 10. JS寬高度