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
  },
  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()
      const resultSplit = result.image.src.split('/')
      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.$axios.post('/users/images',payload)
        .then(response => {
          const pictureURL = response.data.image.url
          this.$emit('upload-image-success',pictureURL)
        })
        .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: 1000px;
  }
}

</style>