裁剪图片vue-cropper实例 基础功能 预览 获取裁剪后图片数据

在项目中使用到了裁剪图片功能，通过vue-croppe实现

安装和引入

# npm 安装
npm install vue-cropper
# yarn 安装
yarn add vue-cropper

项目中引用引入，这里我的项目是 vue2

// 组件中
import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper
}
// 全局
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

使用须知： 需要关掉本地的 mock 服务， 不然图片转化会报错 ，需要使用外层容器包裹并设置宽高

配置项（常用）

名称

描述

默认值