js實現本地的圖片壓縮上傳預覽

js在設計時考慮到安全的原因是不允許讀寫本地文件的，隨着html5的出現提供了fileReader AP從而可以I實現本地圖片的讀取預覽功能，

另外在移動端有的限制圖片大小的需求，主要是考慮圖片過大會占用帶寬，嚴重拖慢瀏覽速度，所以需要進行前端的壓縮，主要通過html5的canvas來實現，

代碼入下：

HTML：

<h3>上傳圖片</h3>
<ul class="list">
    <li class="upload">
        <input type="file" class="chose" accept="image/*" multiple/>
        <img src="img/weituo_luru_add.png" />
    </li>
</ul>

CSS：

* {
    padding: 0;
    margin: 0;
}
h3{
    font-size: 0.6rem;
    font-weight: normal;
    padding: 0.4rem 0.6rem;
}
.list {
    margin-left: 0.4rem;
    margin-top: 0.4rem;
    overflow: hidden;
}
            
.list li {
    float: left;
    width: 2.76rem;
    height: 2.76rem;        
        margin-right: 0.4rem;
    position: relative;
    list-style: none;
}
            
.list img {
    width: 100%;
    height: 100%;
}
            
.upload input {
    width: 100%;
    height: 100% ;
    opacity: 0;
    position: absolute;
    top: 0 ;
    left: 0 ;
    right: 0 ;
    bottom: 0 ;
    z-index: 10;
    transform: translateY(0) ;
}
            
.upload img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
            
#upcancle {
    position: absolute;
    right: 0;
    width: 0.6rem;
    height: 0.6rem;
    text-align: center;
    line-height: 0.6rem;
    background-color: #00D3AF;
    color: #f3f3f3;
    border: solid 0.02rem #00D3AF;
    font-size: 0.5rem;
    border-radius: 50%;
    z-index: 8;
    font-weight: bold;
}    

JS：

var reader = new FileReader();
    //創建一個img對象
var img = new Image();
    // 選擇的文件對象
var file = null;
     // 縮放圖片需要的canvas
var canvas = document.createElement('canvas');
 var context = canvas.getContext('2d');

     // base64地址圖片加載完畢后
img.onload = function() {
    // 圖片原始尺寸
    var originWidth = this.width;
    var originHeight = this.height;
      // 最大尺寸限制，可通過國設置寬高來實現壓縮程度
    var maxWidth = 800,
       maxHeight = 800;
      // 目標尺寸
   var targetWidth = originWidth,
       targetHeight = originHeight;
      // 圖片尺寸超過400x400的限制
    if(originWidth > maxWidth || originHeight > maxHeight) {
        if(originWidth / originHeight > maxWidth / maxHeight) {
           // 更寬，按照寬度限定尺寸
             targetWidth = maxWidth;
              targetHeight = Math.round(maxWidth * (originHeight / originWidth));
         } else {
             targetHeight = maxHeight;
             targetWidth = Math.round(maxHeight * (originWidth / originHeight));
          }
    }
      // canvas對圖片進行縮放
      canvas.width = targetWidth;
       canvas.height = targetHeight;
      // 清除畫布
      context.clearRect(0, 0, targetWidth, targetHeight);
      //畫布背景色改為白色，默認是黑色，如果上傳的是圓形圖片會背景有黑色塊
    　context.fillStyle = '#fff';
      context.fillRect(0, 0, targetWidth, targetHeight);
        // 圖片壓縮                
      context.drawImage(img, 0, 0, targetWidth, targetHeight);

       /*第一個參數是創建的img對象；第二個參數是左上角坐標，后面兩個是畫布區域寬高*/
       //壓縮后的圖片base64 url
        /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默認值是'image/jpeg';
         * qualityArgument表示導出的圖片質量，只要導出為jpg和webp格式的時候此參數才有效果，默認值是0.92*/
      var newUrl = canvas.toDataURL('image/jpeg', 0.92); //base64 格式

        //顯示壓縮后的圖片
       var li = '<li><span id="upcancle">X</span><img src="' + newUrl + '"/></li>';
          $('.list').prepend(li);
};
    //input type='file'上傳時執行的函數
 $('.chose').change(function() {
    file = this.files[0];
     // 選擇的文件是圖片                
    if(this.files && this.files[0]) {
         var ext = this.value.substring(this.value.lastIndexOf(".") + 1).toLowerCase();
         if(ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
              alert("圖片的格式必須為png或者jpg或者jpeg格式！");
              return false;
         } else {
               reader.readAsDataURL(file);
          }
    }
})
 // 文件base64化，以便獲知圖片原始尺寸
reader.onload = function(e) {
       img.src = e.target.result;
};

//刪除按鈕
$('.list').delegate('span', 'click', function() {
      $(this).parents('li').remove();
})