图片截取vue-cropper

vue-cropper官网写的还挺详细的
我写的demo功能：截取正方形头像
安装：

npm install vue-cropper

main.js引用

import VueCropper from 'vue-cropper' 
Vue.use(VueCropper)

vue文件demo：

<template>
  <div class="home">
    <vueCropper
    style="width:300px;height:300px"
      ref="cropper"
      :img="option.img"
      :autoCrop="option.autoCrop"
      :centerBox="option.centerBox"
      :fixedNumber="option.fixedNumber"
      :infoTrue="option.infoTrue"
      :fixed="option.fixed"
    ></vueCropper>
    <button @click="save">保存</button>
    <img id='newPic'>
  </div>
</template>

<script>

export default {
  data(){
    return{
      option:{
        img:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3290482298,4219526326&fm=26&gp=0.jpg',//图片地址
        fixed:true,//开启截图框宽高固定比例
        fixedNumber:[1,1],//截图框的宽高比例
        autoCrop:true,//默认生成截图框
        centerBox:true,//截图框是否被限制在图片里面
      }
    }
  },
  methods:{
    save(){
      // 获取截图的base64 (或者blob)数据
      this.$refs.cropper.getCropData((data) => { 
        document.getElementById('newPic').src = data
      })
    }
  }
}
</script>
<style scoped>
button{
  margin: 20px;
}
img{
  display: block;
}
</style>

如下图：

微信图片_20200923144839.png