最近在行動裝置設計頭像上傳功能時，原本是以直接透過formData上傳，然而實際使用情況是：對於過大的圖片（高像素手機所拍攝的照片等）上傳時間過長會導致上傳失敗，而每次都上傳原始大小的圖片（後台處理壓縮）十分影響用戶體驗，所以研究了一下通過canvas壓縮圖片並上傳的方法，以下是整理的一些思路和心得：
一、取得本地圖片，並將圖片繪製到畫布中。這裡的困難在於：由於瀏覽器的保護機制，無法直接取得到本機檔案的圖片路徑，所以需要將本機圖片編譯成base64格式再做上傳，程式碼如下：
JavaScript Code複製內容到剪貼簿
-
var result = document.getElementById("/* 出錯訊息顯示區塊 */""/* 出錯訊息顯示區塊 */"; 🎜>
-
var input = document.getElementById("/* >
-
- if(typeof FileReader === ){
result.innerHTML =
"抱歉，你的瀏覽器不支援 FileReader
"-
; 🎜>
input.setAttribute('disabled'
,-
'disabled'
}else{
-
input.addEventListener('change',readFile,
- false);
}
-
function
- readFile(){
- var file = this
- .files[0]; >
if(!/image/w /.test(file.type)){
alert(
- "請確定檔案為影像類型");
- return false;
false-
; }
var
- reader = new
- FileReader(); 🎜>
reader.readAsDataURL(file);
reader.onload = function(e){
-
- // this.result 編譯後的影像編碼，可直接使用src顯示
}
-
}
- 二、影像在canvas中的處理
-
JavaScript Code
複製內容到剪貼簿
- var c=document.getElementById("/* canvas標籤的id */""/* canvas標籤的id */"
-
var cxt=c.getContext("2d"
); -
var img=new
Image();
-
img.src=;
-
var width = img.width;
-
var height = img.height;
-
dic = height / width;
-
c.width = 200;
-
c.height = 200 * dic;
-
cxt.clearRect(0,0,200,200*dic);
-
cxt.drawImage(img,0,0,200,200*dic);
-
var finalURL = c.toDataURL();
-
// 最後得到的 finalURL 即壓縮的圖片編碼，可用來上傳或直接產生img標籤
這裡要注意的幾點是：
1、本地偵錯時會有一個報錯，原因為跨域問題，需要再服務端調試；
2、canvas中的drawImage()方法具備影像剪裁功能，但將影像拉伸與剪裁同時寫入的話，會優先執行剪裁的方法；
3、使用AJAX上傳影像編碼時，編碼內的加號會被轉成空格上傳導致後台編譯失敗；
4.關於上傳圖片區域的方法尚在嘗試階段，後續會補上心得。
以上就是本文的全部內容，希望對大家的學習有所幫助。
原文：
http://www.cnblogs.com/liaojh/p/5209433.html
