前端纯js模仿微信头像的裁剪(图片裁剪)

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

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

1.原图:

2.上传之后

3.调整比例和大小

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

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

猜你喜欢

转载自my.oschina.net/u/1757225/blog/1535327
今日推荐