利用cropper.js封装vue如何实现在线图片裁剪组件功能（详细教程）

效果图如下所示，

github:demo下载

cropper.js

github:cropper.js

官网（demo）

cropper.js 安装

• npm或bower安装

clone下载：下载地址

git clone https://github.com/fengyuanchen/cropper.git

引用cropper.js

主要引用cropper.js跟cropper.css两个文件

注意：必须先引入jquery文件，才能使用cropper.js插件

简单使用

构建截图所要用到的p容器

添加容器的样式，让img填充满整个容器（很重要）

调用cropper.js方法，初始化截图控件

其他详细api请参考：github:cropper.js

封装成vue组件

封装成vue组件中需解决的问题

• cropper.js相关

模拟input框点击选择图片并对选择的图片进行格式、大小限制

重新选择图片裁剪

确认裁剪并获取base64格式的图片信息

• vue相关

非父子组件之间的通信问题

模拟input框点击选择图片并对选择的图片进行格式、大小限制

构建一个隐藏的input标签，然后模拟点击此input，从而达到能选择图片的功能

给input绑定一个监听内容变化的方法，拿到上传的文件，并进行格式、大小校验

重新选择图片裁剪

当第一次选择图片之后，肯定会面临需要重选图片的问题，那么就会面临如何替换掉裁剪框中的图片，上面的步骤选择了图片后通过FileRender()方法拿到了图片的主要信息，现在就需要重新构建裁剪框就可以解决问题了，查看cropper.js给出的官方demo，发现官方是使用动态添加裁剪容器的方法，进行操作的，这里我们仿照官方进行实现。

确认裁剪并获取base64格式的图片信息

构造用于上传的数据

非父子组件之间的通信问题

在之前的项目中，常用到父子组件之间的通信传参，一般用两种方法

在router里面放置参数，然后通过调用route.params.xxx或者route.query.xxx进行获取

通过props进行通信

这里我们使用eventBus进行组件之间的通信

步骤

1.声明一个bus组件用于B组件把参数传递给A组件

2.在A组件中引用bus组件，并实时监听其参数变化

3.B组件中同样引用bus组件，来把参数传给A组件

参考：

vue-$on
vue-$emit
vue.js之路(4)——vue2.0s中eventBus实现兄弟组件通信

vue选图截图插件完整代码

BY-LucaLJX

github: lucaljx

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JavaScript满天星导航栏实现方法

详解从买域名到使用pm2部署node.js项目全过程

layui select动态添加option的实例

以上就是利用cropper.js封装vue如何实现在线图片裁剪组件功能（详细教程）的详细内容，更多请关注Gxl网其它相关文章！