ShowEasyFrontEnd/FrontEnd/components/user/cropImageDialog.vue

<template>
  <v-dialog @click:outside="cancelCropImage" content-class="mb-15" scrollable width="70%" v-model="isCropImageDialogActive" style="z-index:500">
    <v-card class="border-radius-20 pt-12 cropper-card-height">
      <v-spacer class="d-flex justify-end">
        <v-btn icon @click="cancelCropImage" class="me-15 mb-9">
          <v-icon>
            mdi-close
          </v-icon>
        </v-btn>
      </v-spacer>
      <v-spacer class="d-flex justify-center pb-15">
        <cropper
          class="cropper"
          ref="cropper"
          :src="cropImagePreview"
          :stencil-component="$options.components.CircleStencil"
        />
      </v-spacer>
      <v-spacer class="d-flex justify-center justify-sm-end mb-11">
        <v-btn class="me-3" width="110px" @click="cancelCropImage" text color="primary">
          {{ $t("userProfile.cropReset") }}
        </v-btn>
        <v-btn class="me-15 border-radius-16" width="110px" @click="cropImage" color="primary">
          {{ $t("userProfile.crop") }}
        </v-btn>
      </v-spacer>
    </v-card>
  </v-dialog>
</template>
<script>
import { CircleStencil, Cropper } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css';
export default {
  name: "cropImageDialog",
  components: {
    CircleStencil, Cropper
  },
  data() {
    return {
      
    };
  },
  props: {
    isCropImageDialogActive: {
      type: Boolean,
      required: true,
      default: false,
    },
    cropImagePreview: {
      type: String,
      required: true,
      default: '',
    },
  },
  methods: {
    cancelCropImage() {
      // const deleteFile = this.cropImagePreview.split('/')
      // const filename = deleteFile.pop()
      // this.$axios.delete(`/users/images?filename=${filename}`)
      // .then(response => {})
      // .catch(error => console.log(error))
      this.$emit('close-crop-dialog')
    },
    cropImage() {
      // const result = this.$refs.cropper.getResult()
      // console.log(result);
      // const resultSplit = result.image.src.split('/')
      // console.log(resultSplit);
      // const fileDetails = resultSplit[resultSplit.length-1].split('.')
      // const fileURL = result.canvas.toDataURL('image/'+fileDetails[1])
      // const file = this.dataURLtoFile(fileURL,fileDetails[0]+'.'+fileDetails[1])
      // const payload = new FormData()
      // payload.append('file',file)
      this.$emit('upload-image-success')
      // this.$axios
      //     .post(
      //       `/trending/api/Members/UploadAvatar`
      //     )
      //     .then((response) => {
      //     //console.log(JSON.stringify(response));
      //     if(response && response.data && response.data.DATA && response.data.DATA.rel){
      //       let data = response.data.DATA.rel
      //       if(data){
      //         const pictureURL = data;
      //         console.log("change pic:" + pictureURL);
      //         this.$emit('upload-image-success');
      //       }
      //     }
      //   })
      //   .catch((error) => {
      //     console.log(error);
      //   });

    },
    dataURLtoFile(dataurl, filename) {
      let arr = dataurl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), 
          n = bstr.length, 
          u8arr = new Uint8Array(n);        
      while(n--){
          u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {type:mime});
    },
  },
}
</script>
<style lang="scss" scoped>
.cropper {
  width: 85%;
  @media screen and (max-width: 600px) {
    min-height: 164px;
  }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    min-height: 303px;
  }
  @media screen and (min-width: 961px) {
    min-height: 538px;
  }
}
.cropper-card-height {
  @media screen and (max-width: 600px) {
    min-height: 515px;
  }
  @media screen and (min-width: 600px) and (max-width: 960px) {
    min-height: 717px;
  }
  @media screen and (min-width: 961px) {
    min-height: 900px;
  }
}

.vue-advanced-cropper{
  height: 600px !important;
}
.vue-advanced-cropper__stretcher{
  height: 600px !important;
}

.vue-advanced-cropper__boundaries{
height: 600px !important;
}
.vue-advanced-cropper__foreground{
    height: 600px !important;
}

.vue-advanced-cropper__image-wrapper{
  height: 600px !important;
}

.vue-advanced-cropper__background{
  height: 600px !important;
}

//裁切
.vue-circle-stencil .vue-circle-stencil--movable{
  height: 400px !important;

}

.vue-bounding-box .vue-circle-stencil__bounding-box{
  height: 400px !important;

}

.vue-preview__wrapper{
  height: 400px !important;

}
</style>