vue-亚博电竞手机版

vue-cropper怎么实现裁剪图片

这篇文章主要讲解了“vue-cropper怎么实现裁剪图片”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue-cropper怎么实现裁剪图片”吧！

先展示一下效果

如何使用：

1、安装

npm install vue-cropper //（如果安装不上，用cnpm）

2、直接贴代码爽快人就是这样

@import"~css/public.scss";.handledialog{@includecententcenterdialog;.croppercontent{display:flex;justify-content:space-between;padding-left:20px;.cropper{width:400px;height:400px;border:1pxsolid#ddd;}.previewbox{flex:1;display:flex;justify-content:center;flex-direction:column;align-items:center;.title{font-size:18px;height:36px;margin-bottom:20px;}.showpreview{flex:1;display:flex;justify-content:center;.preview{overflow:hidden;background:#eeeeee;border:1pxsolid#eeeeee;}}}}.footerbutton{margin-top:30px;margin-left:20px;display:flex;justify-content:flex-end;.scopebutton{width:400px;display:flex;justify-content:space-between;}.uploadbutton{flex:1;display:flex;justify-content:center;}.localbutton{cursor:pointer;color:#ffffff;background:#409eff;padding:10px15px;border-radius:3px;appearance:none;display:flex;align-self:center;margin-right:10px;}.inputfile{width:180px;position:absolute;clip:rect(0000);}}}

3、说明，支持网络图片也支持本地图片，图片如果需要上传，我是通过base64转文件，再上传的。

感谢各位的阅读，以上就是“vue-cropper怎么实现裁剪图片”的内容了，经过本文的学习后，相信大家对vue-cropper怎么实现裁剪图片这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是恰卡编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！