前端如何壓縮圖片

　　

使用canvas來壓縮圖片

canvas的toDataUrl方法能夠將內容導出爲base64編碼格式的圖片，採用base64編碼將比源文件大1/3，可是該方法能夠指定導出圖片質量，因此前端可實現上傳圖片的壓縮。先經過fileApi拿到本地圖片地址，而後新建一個Img元素，圖片繪製到canvas中後再將其導出（壓縮）。例如：

$(':file').on('change',function(){         var file = this.files[0];         var url = webkitURL.createObjectURL(file);           /* 生成圖片         * ---------------------- */         var $img = new Image();         $img.onload = function() {               //生成比例             var width = $img.width,                     height = $img.height,                     scale = width / height;             width = parseInt(800);             height = parseInt(width / scale);               //生成canvas             var $canvas = $('#canvas');             var ctx = $canvas[0].getContext('2d');             $canvas.attr({width : width, height : height});             ctx.drawImage($img, 0, 0, width, height);             var base64 = $canvas[0].toDataURL('image/jpeg',0.5);               //發送到服務端             $.post('upload.php',{formFile : base64.substr(22) },function(data){                 $('#php').html(data);             });           }         $img.src = url;   });

 

可是此方法存在一些問題：

1. 在ios上當圖片過大時圖片會被壓扁
2. 在android上沒法指定壓縮質量
3. 圖片經過fileApi讀取進來，豎着拍的圖片會橫置

好在這些問題都有解決方案：

1. 使用ios-imagefile-megapixel，將大圖拆分爲一塊塊的小圖讀取到小canvas再拼起來(還能夠設置圖片旋轉)
2. 使用javascript_jpeg_encode
3. 使用JpegMeta（沒有測過）