裁切bs-upload-cropper

父组件使用

<bs-upload-cropper ref="bsUploadOcr" @on-cropped-cancel="onCroppedCancel" @on-cropped-save="onCroppedSave"></bs-upload-cropper>

父组件调用

 //======旋转裁切 start
    async onCroppedCancel(result) {
      let that = this;
      that.$emit("open-uploading", false);
    },
    async onCroppedSave(result) {
      let that = this;
      that.doAfterRead(result);
    },
     //======旋转裁切 end

  // 组件方法 获取 流
    async onRead(file) {
      //调用裁切框
      let that = this;
      await that.$refs["bsUploadOcr"].onRead(file);

      // let that = this;
      // that.files.name = file.file.name; // 获取文件名
      // that.files.type = file.file.type; // 获取类型
      // this.picValue = file.file; // 文件流
      // that.picValue = await dataURLtoFile(file.content, that);
      // imgPreview(that.picValue, that);
    },

bs-upload-cropper 对外提供的方法

 methods: {

    //======旋转裁切
    async onCutCancel() {
      this.cut.show = false;
      that.$emit("on-cropped-cancel",{});
    },
    async onCutRotate() {
      this.cut.cropper.rotate(90);
    },
    async onCutZoomX() {
      this.cut.cropper.zoom(-0.1);
    },
    async onCutZoomD() {
      this.cut.cropper.zoom(0.1);
    },
    async onCutSave() {
      let that = this;
      that.cut.show = false;
      var src = that.cut.cropper
        .getCroppedCanvas()
        .toDataURL("image/jpeg", 0.7);
      //提交裁切保存结果
      that.$emit("on-cropped-save",{
        size: that.files.size,
        content: src,
        file: { type: that.files.type },
      });
    },
    // 组件方法 获取 流
    async onRead(file) {
      //调用裁切框
      let that = this;
      that.files.name = file.file.name; // 获取文件名
      that.files.type = file.file.type; // 获取类型
      that.files.size = file.file.size; // 获取类型
      that.files.position = file.file.position; // 获取类型
      that.cut.imgLoading = true;
      that.cut.show = true;
      that.cut.cropper.replace(file.content, false);
      that.cut.imgLoading = false;
    },
  },