前端純js模仿微信頭像的裁剪（圖片裁剪）

我的的移動端網頁項目，有個功能要作一個頭像切割的功能，效果要和微信頭像切割一致。不在前端進行實際的裁剪，只是拿到裁剪的參數，裁剪的起始座標以及寬度和高度（x,y,width,height）。剛拿到這個要求的時候，我想這麼屌絲的功能，做爲一個優秀的程序猿怎麼能重複造輪子呢，因而果斷度娘了一下。麻蛋，不是廣告炸彈，就是瞎扯淡。無奈之下，原本咬牙開始了本身造輪子。原本想本身寫應該也不是很難，可是因爲本身是業餘前端，因此花了兩三天的時間纔算完成這個功能。

測試時候，若是是在pc端瀏覽器模式下，請切換成手機模式；固然，能夠直接部署一下，在手機上直接進行測試。測試效果以下：

1.原圖：

2.上傳以後

3.調整比例和大小

4.最後上傳至服務器，進行裁剪，裁剪結果

 

總結：前端調整以後，最後是把參數（起始座標和寬高）和圖片傳到後臺，後臺根據傳進來的參數進行裁剪。（源碼：https://gitee.com/sanpy/h5-demo/tree/master/cut-image-wx）