Vue2.x中选择图片裁剪(vue-cropper)

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

1、安装

npm install --save vue-cropper 

2、在组件中导入

    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" >



3、截图之后转图片

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

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

vue-cropper

你可能感兴趣的:(Vue2.x中选择图片裁剪(vue-cropper))