h5頁面利用canvas壓縮圖片並上傳

因爲如今手機拍攝的照片質量較高，爲減輕服務器壓力在上傳圖片時須要壓縮後再進行上傳。h5頁面中壓縮圖片就須要用canvas來實現，經過固定canvas的寬高重繪圖片，來達到壓縮的目的。

<div style="margin:0 auto;width:60%;padding-top:80px;">
    <input id="file" type="file" accept="image/jpeg,image/png">
    <div id="img"></div>  
</div>

<script>
    var eleFile = document.querySelector('#file');

    // 壓縮圖片須要的一些元素和對象
    var reader = new FileReader(), img = new Image();

    // 選擇的文件對象
    var file = null;

    eleFile.addEventListener('change', function (event) {
        file = event.target.files[0];
        // 選擇的文件是圖片
        if (file.type.indexOf("image") == 0) {
            reader.readAsDataURL(file);
        }else{
            alert("不支持的文件格式！");
        }

　　　　//增長獲取照片旋轉角度

　　　 　EXIF.getData(file, function() {
    　　 　　Orientation = EXIF.getTag(this, 'Orientation');

　　　　});

}); 
// 文件base64化，以便獲知圖片原始尺寸 
 reader.onload = function(e) {
    img.src = e.target.result; 
 }; 
// 縮放圖片須要的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 = 500, maxHeight = 500; 
   //圖片壓縮後的寬高（單位像素） // 目標尺寸
   var targetWidth = originWidth,
       targetHeight = originHeight; 
// 圖片尺寸超過500x500的限制  
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);
// 圖片展現並旋轉
    if(Orientation && Orientation != 1){
          console.log(Orientation)
         switch(Orientation){
            case 6:     
                 // 旋轉90度
                 canvas.width = targetHeight;
                 canvas.height = targetWidth;
                 context.rotate(Math.PI / 2);
                 // (0,-imgHeight) 從旋轉原理圖那裏得到的起始點
                 context.drawImage(this, 0, -targetHeight, targetWidth, targetHeight);
                 break;
          case 3:
                // 旋轉180度
                context.rotate(Math.PI);
                context.drawImage(this, -targetWidth, -targetHeight, targetWidth, targetHeight);   
                break;
          case 8:
               // 旋轉-90度
               canvas.width = imgHeight;
               canvas.height = imgWidth;
               context.rotate(3 * Math.PI / 2);
               context.drawImage(this, -targetWidth, 0, targetWidth, targetHeight);            
               break;
         }
    }else{
        context.drawImage(this, 0, 0, targetWidth, targetHeight);
    }

  // canvas轉爲blob並上傳
   canvas.toBlob(function (blob) { 
　　　　var newImg = new Image(); 
  　　　newImg.src = URL.createObjectURL(blob);
　　　　document.querySelector('#img').appendChild(newImg)  

     //展現圖片
 　　//可直接以blob格式上傳到服務器 
   }, file.type || 'image/png'); };
 </script>

　　最後補充一下，canvas.toBlob()的方法會有兼容問題（移動端目前發現問題的地方是某些手機直接拍照上傳的時候）

　　解決方法：引入了一個blob插件。CDN地址：https://cdn.bootcss.com/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.js

　　還有部分手機上的照片上傳以後會被默認旋轉，使用插件exif.js能夠獲取照片旋轉角度進行糾正，上方代碼已補充。CDN地址：https://cdn.bootcss.com/exif-js/2.3.0/exif.js