cropper.js使用中裁剪框不显示问题

1. 问题
   在最近的项目中使用到了cropper.js，进行图片裁剪，由于项目中先上传了原始图片，在上传完成后显示图片，然后进行裁剪，结果图片加载完成，裁剪框没有显示。

Image 没有 ready 事件

2. 改进方案
   判断图片是否加载完成再初始化使用，使用监听 load ，而不是ready

代码如下：

// html
  <div style="max-height: 500px">
            <img ref="new_avater" id="new_avater" style="max-width: 100%" :src="avaterUrl">
  </div>

// 先定于  this.$image
  this.$image = document.getElementById('new_avater')


// 图片上传完成后的操作
 this.avaterUrl = "拿到的图片地址" 
 
 var options = {                                 // 自选定义基础配置
     ready: function (e) {
           console.log(e.type);
     },
    cropBoxResizable: false,
    aspectRatio: 1 / 1,
    dragMode: 'none',
    viewMode:1,
   }
                        
  this.$image.addEventListener('load', () => {      // 监听图片加载事件
      if(this.cropperInfo) {                        // 由于可以重复选择图片，解决多次初始化问题
         this.cropperInfo.destroy()
      }
      this.cropperInfo = new Cropper(this.$image, options)       //  初始化相关配置
      this.cropperInfo.setCropBoxData({ width: 60,   height: 60   })    // 设置裁剪框大小
  })