個人製作圖片裁剪的問題總結

在一個上傳圖片進行列印的專案當中，由於使用者上傳的圖片形狀比例千奇百怪，所以需要前端做一個圖片裁剪功能。剛開始覺得挺簡單的就是做圖片裁剪功能，網上的外掛一大堆，隨便找一個套上就ok啦。
然而，發現了很多問題：
1.外掛的相容性（推薦cropper）
找裁剪外掛過程中是有很多，然而把它們放在手機上測試的時候發現，有些並不能適應手機的觸控效果，安卓和蘋果手機的相容性不好，所以最終選擇了cropper.js
2.在傳資料給後臺的時候發現canvas.toDataURL()會產生特別長的字串，所以想了各種方法，在網上把base64制編碼變成二進位制，
在利用fromData()進行傳遞二進位制檔案給後臺。發現瀏覽器傳遞檔案有限制，後來找了把二進位制變為分片進行傳遞,雖然傳遞過去了，但是發現加重伺服器的負擔也沒有減少後臺的壓力。

3.由於生成的圖片需要邊框，如何給canvas描虛線的邊框
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.setLineDash([6, 6]); //設定虛線長度(虛線長度，虛線間隔)
ctx.strokeRect(20,20,150,100);//繪製虛線的區域

4.drawImage的用法
ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
ctx.drawImage(image, 選擇原圖片的起點x座標, 選擇原圖片的起點y座標, 選擇原圖片的寬度, 選擇原圖片的高度, 在畫布開始繪製圖片的起點x座標, 在畫布開始繪製圖片的起點y座標, 在畫布開始繪製圖片的寬度, 在畫布開始繪製圖片的高度);

5.不同的瀏覽器對於上傳的blob資料的大小有不同的限制

總結：
1.利用canvas獲取影象地址傳遞給後臺的限制：影象的大小不要太大最好不要超過2M；
2.可以推薦傳遞裁剪圖片的座標給後臺；
3.前端利用canvas裁剪圖片其實就是生成新的圖片，所以在保證清晰度和圖片相近的時候，會發現生成的圖片質量會比以前的大；
4.利用canvas壓縮圖片也就意味著生成圖片的大小會變的更小；
5.裁剪圖片適合應用於頭像剪輯。重點內容