Vue2.x中选择图片裁剪（vue-cropper）

最近项目中有个选择图片后裁剪的需求，项目使用的是Vue。

1、安装

npm install --save vue-cropper 

2、在组件中导入

<vueCropper
    ref="cropper"
    :img="option.img"
    :info="false" 

     :outputSize="option.size"
     :outputType="option.outputType"
     :fixed-box="option.fixedBox"
     :can-move="option.canMove"
     :can-move-box="option.canMoveBox"
     :auto-crop="option.autoCrop"
     :auto-crop-width="option.autoCropWidth"
     :auto-crop-height="option.autoCropHeight" >
</vueCropper>

<script>

    import { VueCropper } from "vue-cropper"

    export default {
        data() {
            option: {
                 img: '',
                 size: 1,
                 outputType: "png",
                 full: false,
                 fixedBox: false,
                 canMove: true,
                 canMoveBox: true,
                 autoCrop: true,
                 original: false,
                 // 只有自动截图开启 宽度高度才生效
                 // autoCropWidth: 690,
                 // autoCropHeight: 518,
                 autoCropWidth: 345,
                 autoCropHeight: 259,
                 centerBox: false,
                 high: true,
             }
        },
        components: { VueCropper },
    }

</script>

3、截图之后转图片

this.$refs.cropper.getCropData((data) => {})  // 这个方法将转成base64格式
this.$refs.cropper.getCropBlob((data) => {})  // 这个方法将转成Blob对象

4、以上内容参照vue-cropper官方文档 

vue-cropper