首页 >> 大全

vue实现自定义裁剪图片大小组件

2023-09-05 大全 37 作者:考证青年

最近在做一个项目,要实现用户上传人脸图片给后端,大小和人脸都有一定的要求,需要使用到在web端实现图片裁剪功能,也就是将图片裁剪到对应大小,然后发送给后端。识别这个人的人脸!

于是想了一下要用的实现这样功能。

vue中的组件__vue裁剪图片上传

原理很简单就是通过放大缩小和移动,确定放大缩小后的图片的宽高和相对截图左边和上边的位置的值,对应使用的api就可以实现。

上代码:




最后运行结果:

使用的时候可以直接调用组件:

、代表要裁剪的高和宽,为图片的src地址 或者URL都可以,则为截图保存后抛出的裁剪后的图片数据。

结束语:来公司一年了,年后好几个同事都离职了,自己也不知道未来要怎么走,庆幸的是自己发现了自己有很多的不足,最近也完成了一件对自己来说的“大事”,自己也在慢慢地努力中,一直在朝那个优秀的自己努力着。。。。。

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了