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

2019独角兽企业重金招聘Python工程师标准>>>

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

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

1.原图：

2.上传之后

3.调整比例和大小

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

 

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

转载于:https://my.oschina.net/u/1757225/blog/1535327