被截图的尺寸变成这样是什么原因？

[xyyVee]

代码环境：vue2.0 vue-cropper: 最新版 截图的背景特别小，然后截图框里的内容是截图框的尺寸 应用场景是：截图嵌在一个dialog里，没有用v-if去渲染vue-cropper 上传多次之后会偶现这样的情况 试过在弹窗关闭前调用this.$refs.cropper.refresh() 但是好像没有用 求大神解答

[xyxiao001]

看不到图片

[xyxiao001]

这个你看看css里面有没有现在图片的最大宽度和高度什么的属性

[xyyVee]

没有，第一次裁剪之后再次打开裁剪弹窗（无上传新图片）然后就会变得这么小了，element计算的宽度和高度就是这么小...

第一次截图会上传截好的图到服务器，所以传进去的是第一次截的图 截完图之后计算的style如下，还没来得及看大神源码，所以这个transform是不是算错了？

    width: 236px;
    height: 150px;
    transform: scale(0.423729, 0.423729) translate3d(-160.48px, -102px, 0px) rotateZ(0deg);

vue-cropper配置代码:

<div class="cropper">
    <div
      ref="main"
      class="main">
     <!-- 触发弹窗 -->
      <label
        v-loading="loading"
        :style="`width: ${ratio[0]}px; height: ${ratio[1]}px;`"
        :for="'upload' + imageIndex"
        class="coverImgWrap"
        @mouseover="setOperation">
        <div
          v-show="show"
          :style="'background:url('+ urlData + ') no-repeat center center / cover'"
          class="load"/>
        <i
          v-show="!show"
          class="el-icon-plus coverIcon"/>
      </label>
      <div
        v-show="imageIndex === 1"
        ref="tip"
        class="tip">图片格式应为：png、jpeg、jpg、gif；不可大于3MB</div>
      <input
        ref="files"
        :id="'upload' + imageIndex"
        type="file"
        style="display:none"
        accept=".png,.jpg,.gif,.jpeg"
        @change="uploadImg($event)">
      <!-- 裁剪弹窗 -->
      <el-dialog
        ref="dialogDiv"
        :visible.sync="dialogTableVisible"
        :close-on-click-modal="false"
        :modal="false"
        title="图片裁剪"
        style="text-align:center"
        width="900px"
        @close="closeDialog">
        <div
          v-show="dialogTableVisible"
          :style="{height: dialogHeight}"
          class="image-cropper">
          <div class="cropper">
            <vueCropper
              ref="cropper"
              :img="options.img"
              :output-size="options.size"
              :output-type="options.outputType"
              :info="options.info"
              :full="options.full"
              :high="options.high"
              :center-box="options.centerBox"
              :can-scale="options.canScale"
              :can-move="options.canMove"
              :can-move-box="options.canMoveBox"
              :auto-crop="options.autoCrop"
              :auto-crop-width="options.autoCropWidth"
              :auto-crop-height="options.autoCropHeight"
              :fixed="options.fixed"
              :fixed-number="options.fixedNumber"
              :original="options.original"
              class="preview"
              @realTime="realTime"/>
          </div>
          <div class="all-preview">
            <div
              v-for="(item, index) of previewArr"
              v-show="dialogTableVisible"
              :class="'preview-box' + (index+1)"
              :key="index">
              <div
                ref="preview"
                :style="'background:url('+ imgData + ') no-repeat center center / cover'" />
              <span>{{ item.title }}</span>
            </div>
          </div>
        </div>
        <el-row style="margin-top:12px">
          <el-col
            :span="24"
            style="text-align:right">
            <el-button
              type="primary"
              @click.stop="submit">确认</el-button>
            <el-button
              plain
              type="primary"
              @click.stop="closeDialog">取消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>

显示裁剪框的代码：

// 显示裁剪框
    cropperImage() {
      this.options.img = this.modifyData
      this.$nextTick(() => {
        this.getImageData()
      })
      this.dialogTableVisible = true
    },
// 裁剪
   getImageData() {
      this.$refs.cropper.getCropData((data) => {
        this.imgData = data
      })
    }