vue-cropper图片裁剪问题

Question

进入VueCropper时开始截取图片，退出VueCropper时停止截取图片。在leave方法中能够拿到截取的图片。

但是进入VueCropper时开始截取图片，点击截取按钮时停止截取图片。在doCut方法中拿到的截取图片却并没有截取，而是原图，这是为什么。

<template>
  <el-dialog
    id="createDialog"
    title="画像を選択"
    width="90%"
    :visible.sync="$store.state.showCreateDialog"
    top="110px"
    @close="close"
  >
    <mLine />
    <el-container style="height:800px;">
      <el-main style="overflow:hidden;margin-top:-20px;">
        <div style="height:600px;width:100%;float:left">
          <div>
            <el-row>
              <font>票はその地区によって決めてください，クリック“トリミング、次のステップ”</font>
            </el-row>
          </div>
          <div style="width:100%;height:600px;background-color:#f6f7fb">
            <div
              style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;"
            >
              <vueCropper
                @mouseenter.native="enter"
                @mouseleave.native="leave"
                ref="cropper"
                :img="uploadImg"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :fixed="option.fixed"
                :fixedNumber="option.fixedNumber"
                :centerBox="option.centerBox"
                :infoTrue="option.infoTrue"
                :fixedBox="option.fixedBox"
                style="background-image:none"
              ></vueCropper>
              <!-- <img class="tryImage" :src="editImg" /> -->
            </div>
          </div>
          <div style="width:100%;">
            <span class="btn-upload">
              <el-button style="width:100%;background-color:#a9a9a9">
                <font color="white">画像をアップロード</font>
              </el-button>
              <input
                type="file"
                ref="head_picture_file"
                id="head_picture_file"
                name="file"
                class="input-file"
                @change="uploadImage($event)"
              />
            </span>
          </div>
        </div>
      </el-main>
      <el-footer style="margin-bottom:20px;">
        <el-row :gutter="10" type="flex" justify="end">
          <el-col :span="3">
            <el-button @click="skipCut()">トリミングをスキップ</el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="doCut()">トリミング、次のステップ</el-button>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </el-dialog>
</template>

<script>
import mLine from "@/components/common/line";
export default {
  components: {
    mLine
  },
  data() {
    return {
      uploadImg: "",
      option: {
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: "jpeg", // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: false, // 是否默认生成截图框
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: false, // 是否开启截图框宽高固定比例
        fixedNumber: [7, 5], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMove: false, //时候可以移动原图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      }
    };
  },
  methods: {
    enter() {
      if (this.uploadImg == "") {
        return;
      }
      console.log("开始截图");
      this.$refs.cropper.startCrop();
    },
    leave() {
      // console.log("停止截图");
      this.$refs.cropper.stopCrop();
      // //这里拿到截图有效
      //  this.$refs.cropper.getCropData(data => {
      //   console.log(data);
      // });
    },
    skipCut() {
      this.$store.commit("openEditDialog", {
        url:
          "http://172.25.78.198:3000/templates/d52674dd-b21e-4733-9b47-0cf4bd6c6c28.jpeg",
        showInfo: true
      });
      this.$store.commit("closeCreateDialog");
    },
    doCut() {
      // this.$refs.cropper.getCropBlob(data => {
      //   console.log(data);
      // });
      this.$refs.cropper.stopCrop();
      //这里拿到的截图是未裁剪的原图
      this.$refs.cropper.getCropData(data => {
        console.log(data);
      });
      this.$store.commit("openEditDialog", {
        url:
          "http://172.25.78.198:3000/templates/d52674dd-b21e-4733-9b47-0cf4bd6c6c28.jpeg",
        showInfo: true
      });
      this.$store.commit("closeCreateDialog");
    },
    uploadImage(e) {
      var reader = new FileReader();
      var file = e.target.files[0];
      //   if (!/image\/\w+/.test(file.type)) {
      //     //判断文件的是不是图片
      //     alert("上传的文件格式不对,请重新上传...");
      //     return false;
      //   }
      reader.readAsDataURL(file);
      var _this = this;
      reader.onload = function(e) {
        _this.uploadImg = this.result;
      };
    },
    close() {
      this.uploadImg = "";
      //解决dialog关闭后上传同一文件上传不成功的bug
      this.$refs.head_picture_file.value = "";
    }
  }
};
</script>

<style scoped>
.input-file {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  z-index: 1;
  font-size: 30em;
  opacity: 0;
  filter: alpha(opacity=0);
}
.btn-upload {
  position: relative;
  display: inline-block;
  height: 40px;
  *display: inline;
  overflow: hidden;
  vertical-align: middle;
  cursor: pointer;
  width: 100%;
}
#createDialog /deep/ .el-dialog__body {
  padding: 0;
}
</style>

Answer 1

https://blog.csdn.net/UnderIcon/article/details/84563107