前端纯js模仿微信头像的裁剪(图片裁剪)
前端纯js模仿微信头像的裁剪(图片裁剪)
少不读水浒 发表于1个月前
前端纯js模仿微信头像的裁剪(图片裁剪)
  • 发表于 1个月前
  • 阅读 28
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

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

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

1.原图:

2.上传之后

3.调整比例和大小

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

 

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

标签: js h5 图片裁剪 微信
共有 人打赏支持
粉丝 3
博文 12
码字总数 8174
×
少不读水浒
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: