前端時(shí)間做Vue項(xiàng)目的時(shí)候寇窑，要用到圖片壓縮處理哎媚，網(wǎng)上查閱了資料后，發(fā)現(xiàn)并不能滿足實(shí)際的業(yè)務(wù)需求颖系；于是愚臀，自己結(jié)合網(wǎng)上的資料寫了一個忆蚀，有興趣的小伙伴不妨試試~
廢話不多說，先上效果圖姑裂，無圖無真相嘛~
可以在控制臺看出圖片壓縮的信息：
本項(xiàng)目主要依賴有兩個庫馋袜，一個是 cropper 第三方圖片裁剪庫 ， 另一個是 exif 舶斧，獲取圖片源信息欣鳖，主要是用來解決 ios 圖片旋轉(zhuǎn)的問題；
整個項(xiàng)目的核心 代碼是 clipper.js 捧毛，其主要使用方式是直接給 input[file] 控件观堂，添加change事件，并調(diào)用 methods 中的change方法呀忧，這里要傳 event 對象师痕， change 方法接收兩個參數(shù)，第一個是 event 對象而账，第二個參數(shù)是一個對象胰坟，resultObj表示要展示的結(jié)果 img 對象，aspectRatio 表示寬高比泞辐，另外參數(shù)可以根據(jù)實(shí)際情況添加笔横，主要參考cropper文檔說明
整個項(xiàng)目實(shí)現(xiàn)思路是竞滓，觸發(fā) change 事件后，動態(tài)添加 整個裁剪對象 吹缔， 通過移動裁剪框商佑，判斷當(dāng)前裁剪框的位置和大小，通過canvas將裁剪框范圍內(nèi)的圖片信息提取出來厢塘，轉(zhuǎn)成base64編碼茶没，放到 img 標(biāo)簽的 src 屬性里，在此之前晚碾，會經(jīng)過一次圖片大小判斷抓半，如果上傳的圖片大于100K ，會通過 compress 函數(shù)對其經(jīng)行壓縮格嘁，壓縮也是借助 canvas 對象笛求，通過計(jì)算壓縮比進(jìn)行等比例的壓縮，達(dá)到最終的效果糕簿；
圖片壓縮后的上傳放在 postImg 函數(shù)里探入，目前是本地模擬，實(shí)際開發(fā)中請自行根據(jù)需求進(jìn)行編寫懂诗，等到上傳成功之后銷毀整個裁剪對象就大功告成了新症。
整個項(xiàng)目已經(jīng)托管在github上，核心代碼都有較為詳細(xì)的注釋响禽，有需要的小伙伴可以自行下載看看，如果覺得不錯的話荚醒，記得給個star哈~
項(xiàng)目傳送門
ps：由于編輯器的問題芋类，強(qiáng)迫癥請忽略那些紅色波浪線...
