html5 canvas行動瀏覽器上實作圖片壓縮上傳_html5教學技巧

最近在行動裝置設計頭像上傳功能時，原本是以直接透過formData上傳，然而實際使用情況是：對於過大的圖片（高像素手機所拍攝的照片等）上傳時間過長會導致上傳失敗，而每次都上傳原始大小的圖片（後台處理壓縮）十分影響用戶體驗，所以研究了一下通過canvas壓縮圖片並上傳的方法，以下是整理的一些思路和心得：

一、取得本地圖片，並將圖片繪製到畫布中。這裡的困難在於：由於瀏覽器的保護機制，無法直接取得到本機檔案的圖片路徑，所以需要將本機圖片編譯成base64格式再做上傳，程式碼如下：

JavaScript Code複製內容到剪貼簿

1. var result = document.getElementById("/* 出錯訊息顯示區塊 */""/* 出錯訊息顯示區塊 */"; 🎜>
2. var input = document.getElementById("/*  >   
4. if(typeof FileReader === ){      result.innerHTML = 
"

抱歉，你的瀏覽器不支援 FileReader

"
5. ;  🎜>   input.setAttribute('disabled'
,
6. 'disabled' }else{   
7.   input.addEventListener('change',readFile,
8. false); }      
9. function
10.  readFile(){   
11.   var file = this
12. .files[0];   >   if(!/image/w /.test(file.type)){        alert(
13. "請確定檔案為影像類型");        
14. return false;  
false
15. ;     }      var
16.  reader = new
17.  FileReader(); 🎜>   reader.readAsDataURL(file);      reader.onload = function(e){   
18.     
19. //  this.result 編譯後的影像編碼，可直接使用src顯示      }   
20. }   
21. 二、影像在canvas中的處理
22. JavaScript Code

複製內容到剪貼簿

1. var c=document.getElementById("/* canvas標籤的id */""/* canvas標籤的id */"
2. var cxt=c.getContext("2d"
);   
3. var img=new
 Image();   
4. img.src=/* 取得的圖片編碼位址 */;   
5. var width = img.width;   
6. var height = img.height;   
7. dic = height / width;   
8. c.width = 200;  //影像壓縮的標準，這裡是依照定款200px計算   
9. c.height = 200 * dic;   
10. cxt.clearRect(0,0,200,200*dic);   
11. cxt.drawImage(img,0,0,200,200*dic);   
12. var finalURL = c.toDataURL();     
13. //  最後得到的 finalURL 即壓縮的圖片編碼，可用來上傳或直接產生img標籤   

這裡要注意的幾點是：

1、本地偵錯時會有一個報錯，原因為跨域問題，需要再服務端調試；

2、canvas中的drawImage()方法具備影像剪裁功能，但將影像拉伸與剪裁同時寫入的話，會優先執行剪裁的方法；

3、使用AJAX上傳影像編碼時，編碼內的加號會被轉成空格上傳導致後台編譯失敗；

4.關於上傳圖片區域的方法尚在嘗試階段，後續會補上心得。

以上就是本文的全部內容，希望對大家的學習有所幫助。 原文：

http://www.cnblogs.com/liaojh/p/5209433.html