canvas實現圖片尺寸等比壓縮並轉換爲base64字符串

最近公司的一個H5活動，搜狐新聞客戶端開機圖製作，需要用戶上傳一張圖片之後，先顯示出來再進行裁剪，然後上傳base64字符串到服務器上。
但是問題來了，用戶一般上傳的圖片文件的大小都在3-5M左右，轉成base64後提交給服務器的話實在是太大了，到時上傳到服務器的時候服務器超時了（都是淚啊！），所以這裏需要先壓縮下圖片。
偶然間想起來可以用canvas進行圖片壓縮，因爲這個H5只是在客戶端的webview中的，而webview又是webkit內核，所以對canvas的支持自然是比較好的，我們就毫無疑問的選擇了用canvas進行壓縮。
先上代碼吧：

1. var width = img_this.width,height = img_this.height;
2. var scale = width / height;
3. width1 = 720;
4. height1 = parseInt(width1 / scale);
5. var canvas = $("#cans");
6. canvas[0].width = width1; canvas[0].height = height1;
7. var ctx = canvas[0].getContext('2d');
8. ctx.drawImage(img_this,0,0,width,height,0,0,width1,height1);
9.   var cropStr = canvas[0].toDataURL("image/jpeg",0.7)

這裏的img_this是一個img對象，首先我們先得到這個圖片的寬高比，然後指定canvas的寬度爲720，高度由之前的寬高比來定。這裏指定了canvas的寬度爲720後，將圖片畫在canvas裏面後轉成的base64的寬度也會爲720。
我們用drawImage方法將圖片的（0,0）座標到(0 + width , 0+ height)座標也就是整張圖片 畫到 canvas（0,0）到（width1，height1）也就是整個canvas內。然後使用toDataUrl將圖片轉換成jpeg的格式，後面0.7爲圖片的壓縮質量，可以理解爲壓縮率。不要把圖片壓縮成png，因爲壓縮成png後base64的字符串可能比不轉換前的長！
就這麼簡單的幾步就實現了對圖片的壓縮，咋樣，方便吧~