【轉】javascript實現圖片縮減與最佳化

轉自：http://www.liuhui.info/article13.html

 

圖片是網頁最重要的元素之一，也是最不可控的元素之 一，特別是那些使用者可自已上傳的圖片。這就需要有兩種保障，一是保證圖片的正常顯示但不破壞網頁頁面，二是保證圖片顯示的品質與效果，我們在實現上很多都 採用服務端處理，用戶端展示圖片即可，但這很耗費服務端的處理時間，畢竟處理圖片是需要消耗大量資源的，因此很多情況下採用javascript實現圖片 縮減，並最佳化圖片的顯示。

javascript實現圖片縮減最簡單的方式是在頁面載入完後調用載入一個圖片縮減事件，通過指定一個寬度或高度的最大值，判斷圖片的寬度與高度不超過最大值的前提，這樣就能實現圖片的自動縮減，如下：

1. <img src="liuhui.jpg" id="img">

 

1. <script type="text/javascript">
2. window.onload = function(){
3.     var size = 600;
4.     var obj = document.getElementById('img');
5.     if (obj.width > obj .height) {
6.         if (obj.width > size) obj.width = size;
7.     } else {
8.         if (obj.height > size) obj.height = size;
9.     }
10.     }
11. </script>

但這種實現有一個問題，就是圖片縮減需要在頁面載入之後才能處理，這樣，如果圖片的高度和寬度過大，就會破壞網頁頁面結構，然後再縮減造成一定的跳躍感，影響頁面體驗。

注意採用這種方案不能指定圖片的高度與寬度，因為高度與寬度不可控，如果指定高度與寬度就會造成圖片變形，同時也不能實現縮減的效果。

通過分析上面解決方案存在的頁面縮減處理之前由於圖片太大造成頁面破壞的問題，可以採取這樣一種解決方案，先指定圖片的寬度與高度，如下：

1. <img src="liuhui.jpg" id="img" height="1" width="1">

這樣，不管圖片有多大，顯示永遠只是1個像素的圖片，但我們需要顯示縮減的正常圖片，如果要實現圖片的縮減，就需要擷取原圖的寬度與高度，採用服務端擷取圖片高度與寬度：

1. <?php
2. list($width,$height) = getimagesize ('liuhui.jpg');
3. ?>
4.  
5. <img src="liuhui.jpg" id="img" height="1" width="1" w="$width" h="$height" >

然後實現javascript縮減，通過高度與寬度的比例演算法計劃縮減後的顯示高度與寬度，保證圖片顯示的品質與效果。

1. window.onload = function(){
2.     var obj = document.getElementById('img');
3.     var size = 600;
4.     var _width = _height = 0;
5.     if(!obj){return false;}
6.     var width = obj.getAttribute("w") || obj.offsetWidth;
7.     var height = obj.getAttribute("h") || obj.offsetHeight;
8.     if(width >= height ){
9.         if(width>size){
10.              _width=size;
11.              _height = parseInt(size*height/width);
12.         }
13.         obj.width = _width || width;
14.         obj.height = _height || height;
15.     }
16.     if(height > width){
17.         if(height>size){
18.              _height=size;
19.              _width = parseInt((size * width)/height);
20.         }
21.         obj.height = _height || height;
22.         obj.width = _width || width;
23.     }
24. }

實現方法是指定一個圖片的寬度與高度的最大值，並與圖片的寬度與高度比較，通過比例分別計算縮減的圖片寬度與高度。

這種實現的缺點是需要從服務端擷取圖片的實際高度與寬度，但從整體的角度來看，解決了載入頁面縮減處理之前的尷尬情況，同時保證圖片的正常載入顯示，通過比例縮減保證了圖片的品質，提升了圖片載入的速度與效能。