基于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插件 简单使用 构建截图所要用到的div容器 添加容器的样式，让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 总结 以上所述是小编给大家介绍的基于cropper.js封装vue实现在线图片裁剪组件功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！