最近工作需要處理頭像裁剪以及上傳，研究了幾天，寫點心得，提醒自己記住踩過的坑，能幫助別人當然更好。
功能基本就是這樣：
這里需要注意的是：拿到需求后，不要急於直接上手，花費半個小時，甚至更長時間縷清整個脈絡是很有必要的，本人就因為后台接口的問題，返工了...
這里只是對完成方法的概述，具體實現功能請自行解決（真的一搜就有）！！！
起先，對這種功能以前並沒有接觸過，但是鑒於能力問題，采取插件可能是最好的方法。
當然要選取什么插件就成了大問題，幸好本人有一大秘訣，就是去各種已有此功能的網站尋求。
終而發現jcrop（百度用的），而且功能幾乎完全符合，便花了一天的時間去了解，使用jcrop來搭建此功能，可是當把一切做好的時候卻發現后台的接口只支持file流文件的發送，只有這一個接口，而jcrop提交的卻是需要提供圖片x，y等種種信息，它並非直接在本地裁剪后，在上傳到服務器，故而劇終...
隨即發現cropper，也是十分好用的一個裁剪插件，而且它是裁剪后，繪制成canvas直接輸出的，可是如何將canvas傳遞給服務器呢？這里就要引出Blob了...
Blob是什么呢？請允許我百度后告訴你
（我們用到了File對象，而實際上 file 對象只是 blob 對象的一個更具體的版本，blob 存儲着大量的二進制數據，並且 blob 的 size 和 type 屬性，都會被 file 對象所繼承。
所以， 在大多數情況下，blob 對象和 file 對象可以用在同一個地方，例如，可以使用 FileReader 借口從 blob 讀取數據，也可以使用 URL.createObjectURL() 從 blob 創建一個新的 URL 對象。）
這樣我們只要使用canvas轉blob對象發送數據就好拉 canvas.toBlob(callback, type, encoderOptions);
blob上傳這里本人用到了formdata，其實也就是新創建一個formdata對象，然后添加blob進入就好。
這里做點拓展：base64如何轉成blob發送給后台呢（類似與我們這種只有file流文件接口的）
其實也很簡單，
function convertBase64UrlToBlob(urlData){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的頭，並轉換為byte
//處理異常,將ascii碼小於0的轉換為大於0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); }
return new Blob( [ab] , {type : 'image/png'});
}
只要調用方法就ok啦！
采用上述方法，按理說應該就可以了，可是本人試驗后，卻發現不可行，不知道是不是姿勢不對。
之后同事給了一個方法，new File();光看名字就感覺很強硬啊...（u8arr為轉換后的blob對象）
不過確實好使啊，一測試ie爆炸了（edge都爆炸）...
這可如何是好？
最終皇天不負有心人，還是讓我找到方法啦：
對，就是最后這一個參數，給blob命名，然后就可以順暢的傳送啦...
<!-- 割 -->
其實很怕寫東西，一是因為自己實力不夠，二是怕誤人子弟，要是大家耽擱了時間在這里又沒有找到答案真的是有點過意不去啊，所以並不會寫一步一步怎么做，只是講個大略，相信有用的人一眼就能發現自己需要的，而覺得無用的也能直接X掉...
這個世界，有人在偷偷用心愛着你。