vue-img-cropper 基于Vue的移动端图片裁剪组件

最近在做H5端,上传图片时需要裁剪功能，网上找了一圈，先附上链接

http://www.voidcc.com/project/vue-img-cropper

使用过程：

1）、安装裁剪所需的依赖

npm install exif-js -S
npm install vue-img-cropper -D

2）使用

import VueImgCropper from "vue-img-cropper"
components: {
    VueImgCropper
  }

<p @click="showCutImg">图片裁剪测试</p>
    <img :src="imgSrc" alt="" style="width:200px;height:200px;">
    <vue-img-cropper
    ref="cropper"
    :height="200"
    :width="400"
    :maxScale="3"
    :compressionRatio="0.8"
    @cutImg="CutImg"
    >
    </vue-img-cropper>

data:{
    return:{
       imgSrc:''
    }
}
methods: {
    CutImg(file){  // 确认裁剪后的按钮
      console.log(file,'file')
      this.imgSrc = file  // 得到的是裁剪后的base64的图片
    },
    showCutImg(){  // 调取手机选择图片功能
      this.$refs.cropper.getImg()
    },
}  

效果：