JavaScript圖片尺寸處理小結

如何給圖片設置寬高

1. 不作任何設置

如果不對圖片設置寬高，則圖片的顯示的寬高就是圖片的真實寬高。

         <img src="hello.jpg" />
      

2. 通過圖片的寬高屬性設置

可以通過img標簽或者Image對象的width和height屬性來設置寬高，比如：

         <img src="hello.jpg" width="100" heigth="100" />
      

或者

         var image = new Image();
        image.src = 'hello.jpg';
        image.width = 100;
        image.height = 100;
      

這兩種方法的本質是一樣的，就是通過圖像的寬高屬性來設置，這里需要注意的是同時設置了寬高其實只是寬度在起作用，它會按照設置的寬度和真實寬度等比例放大或者縮小。所以說這種方式設置寬高圖片的寬高比例是不會變的，就是圖片不會變形。

3. 通過CSS設置

這種方法比較簡單，代碼如下：

         img {
          height: 100px;
          width: 100px;
        }
      

注意：這種方式設置的寬高都會起作用的，所以如果不是等比例設置會導致圖片變形的，這一點是和通過屬性設置是有本質區別的。如果怕圖片變形還是通過屬性設置吧，但是CSS設置比較方便，代碼耦合性低。

獲取圖片的尺寸

1. 獲取圖片的顯示尺寸

圖片的顯示尺寸主要通過Image對象的width和height屬性來獲取的。如果沒有設置過尺寸則獲取的尺寸和原始尺寸是一致的，如果設置過則返回的是設置過的尺寸即實際顯示尺寸。

         <img id="logo" src="hello.jpg" />
        var width = document.getElementById('logo').width;
        var height = document.getElementById('logo').height;
      

2. 獲取圖片的原始尺寸

獲取圖片的原始尺寸有2種方法，第一種是使用Image對象，即要獲取的圖片URL賦值給一個空的Image對象的src屬性，然后再去讀它的width和height屬性就可以了，這種方法基本上所有的瀏覽器都是可以用的。代碼如下：

         var image = new Image();
        image.src = 'hello.jpg';
        var width = image.width;
        var height = image.height;
      

第二種方法是通過Image對象新增加的兩個屬性naturalWidth和naturalHeight來實現的。目前是包括IE9+， chrome, firefox等瀏覽器都支持該屬性。

         <img id="logo" src="hello.jpg" />
        var width = document.getElementById('logo').naturalWidth;
        var height = document.getElementById('logo').naturalHeight;
      

在實際使用過程中可以先判斷瀏覽器是否支持新的特性來決定使用哪種方式。

         var image = document.getElementById('logo');
        if (image.naturalWidth) {
          //support the new attrubute
        }
      

示例代碼