vue实现自定义裁剪图片大小组件
最近在做一个项目,要实现用户上传人脸图片给后端,大小和人脸都有一定的要求,需要使用到在web端实现图片裁剪功能,也就是将图片裁剪到对应大小,然后发送给后端。识别这个人的人脸!
于是想了一下要用的实现这样功能。
原理很简单就是通过放大缩小和移动,确定放大缩小后的图片的宽高和相对截图左边和上边的位置的值,对应使用的api就可以实现。
上代码:
取消 保存
最后运行结果:
使用的时候可以直接调用组件:
、代表要裁剪的高和宽,为图片的src地址 或者URL都可以,则为截图保存后抛出的裁剪后的图片数据。
结束语:来公司一年了,年后好几个同事都离职了,自己也不知道未来要怎么走,庆幸的是自己发现了自己有很多的不足,最近也完成了一件对自己来说的“大事”,自己也在慢慢地努力中,一直在朝那个优秀的自己努力着。。。。。