前端纯js模仿微信头像的裁剪（图片裁剪）

我的的移动端网页项目，有个功能要作一个头像切割的功能，效果要和微信头像切割一致。不在前端进行实际的裁剪，只是拿到裁剪的参数，裁剪的起始坐标以及宽度和高度（x,y,width,height）。刚拿到这个要求的时候，我想这么屌丝的功能，做为一个优秀的程序猿怎么能重复造轮子呢，因而果断度娘了一下。麻蛋，不是广告炸弹，就是瞎扯淡。无奈之下，原本咬牙开始了本身造轮子。原本想本身写应该也不是很难，可是因为本身是业余前端，因此花了两三天的时间才算完成这个功能。

测试时候，若是是在pc端浏览器模式下，请切换成手机模式；固然，能够直接部署一下，在手机上直接进行测试。测试效果以下：

1.原图：

2.上传以后

3.调整比例和大小

4.最后上传至服务器，进行裁剪，裁剪结果

 

总结：前端调整以后，最后是把参数（起始坐标和宽高）和图片传到后台，后台根据传进来的参数进行裁剪。（源码：https://gitee.com/sanpy/h5-demo/tree/master/cut-image-wx）