canvas實現圖片尺寸等比壓縮並轉換為base64字串
阿新 • • 發佈：2019-01-26
最近公司的一個H5活動，搜狐新聞客戶端開機圖製作，需要使用者上傳一張圖片之後，先顯示出來再進行裁剪，然後上傳base64字串到伺服器上。
但是問題來了，使用者一般上傳的圖片檔案的大小都在3-5M左右，轉成base64後提交給伺服器的話實在是太大了，到時上傳到伺服器的時候伺服器超時了（都是淚啊！），所以這裡需要先壓縮下圖片。
偶然間想起來可以用canvas進行圖片壓縮，因為這個H5只是在客戶端的webview中的，而webview又是webkit核心，所以對canvas的支援自然是比較好的，我們就毫無疑問的選擇了用canvas進行壓縮。
先上程式碼吧：
我們用drawImage方法將圖片的（0,0）座標到(0 + width , 0+ height)座標也就是整張圖片 畫到 canvas（0,0）到（width1，height1）也就是整個canvas內
就這麼簡單的幾步就實現了對圖片的壓縮，咋樣，方便吧~
但是問題來了，使用者一般上傳的圖片檔案的大小都在3-5M左右，轉成base64後提交給伺服器的話實在是太大了，到時上傳到伺服器的時候伺服器超時了（都是淚啊！），所以這裡需要先壓縮下圖片。
偶然間想起來可以用canvas進行圖片壓縮，因為這個H5只是在客戶端的webview中的，而webview又是webkit核心，所以對canvas的支援自然是比較好的，我們就毫無疑問的選擇了用canvas進行壓縮。
先上程式碼吧：
- var width = img_this.width,height = img_this.height;
- var scale = width / height;
- width1 = 720;
- height1 = parseInt(width1 / scale);
- var canvas = $("#cans");
- canvas[0].width = width1; canvas[0].height = height1;
- var ctx = canvas[0].getContext('2d');
- ctx.drawImage(img_this,0,0,width,height,0,0,width1,height1);
- var cropStr = canvas[0].toDataURL("image/jpeg",0.7)
我們用drawImage方法將圖片的（0,0）座標到(0 + width , 0+ height)座標也就是整張圖片 畫到 canvas（0,0）到（width1，height1）也就是整個canvas內
就這麼簡單的幾步就實現了對圖片的壓縮，咋樣，方便吧~