javascript
<template>
  <div class="home">
    <div class="cropper" :style='{width: `${imgObj.width}px`, height: `${imgObj.height}px`}'>
      <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>
    <img :src='previewImg'  alt="" class='previewImg' ref="img">
    <el-button type='primary' @click='handleClick'>按鈕</el-button>
    <img :src="resImg" alt="" v-if="resImg" class='previewImg'>
  </div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
export default {
  data () {
    return {
      option: {
        img: require('../assets/preview.jpg'), // 裁剪圖片地址
        outputSize: 1, // 裁剪生成圖片質(zhì)量
        outputType: 'jepg', // 裁剪生成圖片格式
        canScale: true, // 圖片是否允許滾輪播放
        autoCrop: true, // 是否默認生成截圖框 false
        info: false, // 是否展示截圖框信息
        autoCropWidth: 200, // 生成截圖框的寬度
        autoCropHeight: 200, // 生成截圖框的高度
        canMoveBox: true, // 截圖框是否可以拖動
        fixedBox: true, // 固定截圖框的大小
        canMove: false, // 上傳圖片是否可拖動
        centerBox: true, // 截圖框限制在圖片里面
      },
      resImg: null, //截圖后圖片
      previewImg: null, // 預(yù)覽后的圖片
      previewObj: {
        width: 200,
        height: 200
      },
      imgObj: {
        width: 500,
        height: 500
      }
    }
  },
  components: {
    VueCropper
  },
  watch: {
    'option.img': {
      handler: function (val) {
        const that = this
        const img = new Image()
        img.src = val
        img.onload  = function () {
          that.imgObj.width = this.width
          that.imgObj.height = this.height
        }
      },
      immediate: true
    }
  },
  methods: {
    handleClick () {
      this.$refs.cropper.getCropData(data => {
        console.log(data)
        this.resImg = data
        this.handleDownload(data)
      })
    },
     handleDownload (url) {
      var a = document.createElement("a"); // 生成一個a元素
      var event = new MouseEvent("click"); // 創(chuàng)建一個單擊事件
      a.download = "photo"; // 設(shè)置圖片名稱, 這里可以自定義，也可以獲取圖片名稱進行修改
      a.href = url; // 將生成的URL設(shè)置為a.href屬性
      a.dispatchEvent(event); // 觸發(fā)a的單擊事件
    },
    realTime (data) {
      const that = this
      this.$refs.cropper.getCropBlob(data => {
        // 這里data數(shù)據(jù)為Blob類型，blobToDataURI方法轉(zhuǎn)換成base64
        console.log(data)
        this.blobToDataURI(data, function(res) {
          console.log(res)
          that.previewImg = res
        })
      })
    }, 
    blobToDataURI(blob, callback) {
       var reader = new FileReader();
       reader.readAsDataURL(blob);
       reader.onload = function (e) {
          callback(e.target.result);
       }
    },
   
  },
  mounted () {
  }
}
</script>
<style lang="less" scoped>
@color: #333;
.home{
  width: 100%;
  height: 100%;
  background-color: #eee;
  .cropper{
    width: 500px;
    height: 500px;
    border: 1px solid orange;
  }
  .previewImg{
    width: 200Px;
    height: 200Px;
    object-fit: cover;
    border-radius: 50%;
  }
} 
</style>