Vue学习笔记：vue-cropper实现封装截图组件

• vue-cropper一款好用的前端截图插件

项目介绍：

使用vue+elementUI写的项目，需要用到图片截图功能、视频截图、视频直播等功能，关于截图不失真，发现vue-cropper这款插件能满足需求，可以让用户自由调整截图框的宽高、位置，可以根据用户的需求选择截图的格式（png、jpg），也可以选择图片的编码格式（base64、blob）等。

案例展示：

http://zhb_nyx.gitee.io/cropperimg/#/cropperImg

官方网站：

https://github.com/xyxiao001/vue-cropper

组件文档：

图片裁剪 | zhb-ui

第一步：项目中引入vue-cropper插件

npm install vue-cropper --save 或者 npm install vue-cropper -S

第二步：引入依赖，

在main.js中引入

import VueCropper from 'vue-cropper'

Vue.use(VueCropper)

按需引入

import VueCropper from 'vue-cropper'

第三步：封装弹框内截图组件

如上图样式布局，

第四步：封装点击打开文件上传，弹出截取图片

第五步：调用截取图片组件

现已将该功能整合进我的UI组件库内，大家可以前往下载使用；

文档如上；

 

最后

热爱分享！乐于助人！

大家好，我是“前端互助会”，欢迎大家关注微信公众号“前端公众号”！

一起学习，共同成长！