vueCropper使用教程

1、使用步骤

1.1、安装 vue-cropper

npm install vue-cropper

main.js里面使用
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

组件内使用
import { VueCropper } from 'vue-cropper'
components: {
	VueCropper
}

1.2、基本使用方法

<!--外层容器包裹并设置宽高-->
<div style="width:100%;height:500px">
  <vue-cropper autoCrop img="https://shnhz.github.io/shn-ui/img/Koala.jpg" ref="cropper" centerBox :fixedNumber="[2,1]"/>
</div>
<shn-button @click="getCropData()" block ref="cropper" style="margin:10px 0" type="primary">获取截图后的图片</shn-button>
export default {
  methods:{
    getCropData() {
      this.$refs.cropper.getCropData(data => {
        console.log(data)
      })
    }
  }
}

2、API说明

2.1、属性

2.2、事件

2.3、方法

3、完整代码展示

<template>
  <div>
    <el-button class="primary" @click="dialogVisible = true">图片截取</el-button>
    <div class="home" style="width:100%;height:500px">
    <el-dialog
        title="截取文件"
        :visible.sync="dialogVisible"
        width="30%"
       >
		
        <div class="cropper" >
            <vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.outputSize"
                :outputType="option.outputType"
                :canScale='option.canScale'
                :autoCrop='option.autoCrop'
                :autoCropWidth='option.autoCropWidth'
                :autoCropHeight='option.autoCropHeight'
                :canMoveBox='option.canMoveBox'
                :canMove='option.canMove'
                :centerBox='option.centerBox'
                :info='option.info'
                :fixedBox='option.fixedBox'
                @realTime='realTime'
            ></vueCropper>
        </div>
       <el-upload class="upload-demo"
       :auto-upload="false"
       :on-change="getImgUrl"
       :show-file-list="false"
       list-type="picture"
     >
        <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <img :src='previewImg'  alt="" class='previewImg' ref="img" style="display:block">
        <el-button type='primary' @click='handleClick'>确定</el-button>
   </el-dialog>
    <img :src="resImg" alt="" v-if="resImg" class='previewImg'>
  </div>
  </div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
export default {
  data () {
    return {
      dialogVisible:false,
      option: {
        img: require('../assets/images/swiper1.png'), // 裁剪图片地址
        outputSize: 1, // 裁剪生成图片质量
        outputType: 'jepg', // 裁剪生成图片格式
        canScale: true, // 图片是否允许滚轮播放
        autoCrop: true, // 是否默认生成截图框 false
        info: true, // 是否展示截图框信息
        autoCropWidth: 300, // 生成截图框的宽度
        autoCropHeight: 200, // 生成截图框的高度
        canMoveBox: true, // 截图框是否可以拖动
        fixedBox: false, // 固定截图框的大小
        canMove: false, // 上传图片是否可拖动
        centerBox: true, // 截图框限制在图片里面
      },
      resImg: null, //截图后图片
      previewImg: null, // 预览后的图片
      lists:[]
    }
  },
  components: {
    VueCropper
  },

  methods: {
    //点击获取图片路径
    getImgUrl(file){
        console.log(file)
        
        this.option.img = file.url;
    },
    handleClick () {
        //获取截图后的数据
      this.$refs.cropper.getCropData(data => {
        this.resImg = data
        //关闭模态框
       this.dialogVisible = false;
      })
    },
   
    realTime (data) {
      const that = this
      this.$refs.cropper.getCropBlob(data => {
        // 这里data数据为Blob类型，blobToDataURI方法转换成base64
        this.blobToDataURI(data, function(res) {
          that.previewImg = res
        })
      })
    }, 
    blobToDataURI(blob, callback) {
       var reader = new FileReader();
       reader.readAsDataURL(blob);
       reader.onload = function (e) {
          callback(e.target.result);
       }
    },
   
  },

}
</script>
<style scoped>


.reviewImg{
    width: 200Px;
    height: 200Px;
    object-fit: cover;
    border-radius: 50%;
  }
    .cropper{
    width: 500px;
    height: 500px;
    border: 1px solid orange;
  }

</style>