Vue image cropping component example code

npm install vue-cropper

yarn add vue-cropper

<!-- Simple image cropping component--- Secondary packaging-->
<!-- More APIs https://github.com/xyxiao001/vue-cropper -->
<!-- Usage: Pass in the image ratio to display or hide. Method: Listen for the bottom button click --- add more props query documents yourself -->

<template>
  <div v-if="value" :value="value" @input="val => $emit('input', val)" class="conbox">
    <div class="info">
      <vueCropper
        ref="cropper"
        :img="img"
        :outputSize="outputSize"
        :outputType="outputType"
        :info="info"
        :canScale="canScale"
        :autoCrop="autoCrop"
        :fixed="fixed"
        :fixedNumber="fixedNumber"
        :full="full"
        :fixedBox="fixedBox"
        :canMove="canMove"
        :canMoveBox="canMoveBox"
        :original="original"
        :centerBox="centerBox"
        :infoTrue="infoTrue"
        :mode="mode"
      ></vueCropper>
    </div>
    <div class="btns">
      <div @click="clickCancelCut" class="cancel">Cancel</div>
      <img @click="clickRotate" src="../../assets/paradise/rotate.png" alt="" />
      <div @click="clickOk" class="okey">OK</div>
    </div>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper';
export default {
  name: 'PictureCropping',
  components: { VueCropper },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    //Crop the image address img: {
      type: String,
      default: '',
    },
    //The aspect ratio of the screenshot frame fixedNumber: {
      type: Array,
      default: () => {
        return [1, 1];
      },
    },
  },
  data() {
    return {
      // Basic configuration option for the cropping component
      : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
  },
  computed: {},
  watch: {},
  //Life cycle - creation completed (access the current this instance)
  created() {},
  //Life cycle - Mounting completed (accessing DOM elements)
  mounted() {},
  methods: {
    clickCancelCut() {
      this.$emit('clickCancelCut', 'Click to cancel');
      this.$refs.cropper.stopCrop();
      this.$refs.cropper.clearCrop();
    },
    clickRotate() {
      this.$refs.cropper.rotateRight();
      this.$emit('clickRotate', 'Click to rotate');
    },
    clickOk() {
      //Output the trimmed base64
      this.$refs.cropper.getCropData(data => {
        this.$emit('clickOk', data);
        this.$refs.cropper.stopCrop();
        this.$refs.cropper.clearCrop();
      });
    },
  },
};
</script>
<style lang='less' scoped>
/* @import url(); Import css class*/
.conbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  height: 100vh;
  width: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .info {
    width: auto;
    height: 800px;
    .vue-cropper {
      background-image: none;
      background-color: #000;
    }
  }
  .btns {
    padding: 0 20px;

    color: #fff;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    img {
      width: 85px;
      height: 85px;
    }
    .cancel {
      background-color: #606465;
      padding: 15px 20px;
      width: 100px;
      border-radius: 10px;
    }
    .okey {
      background-color: #df6457;
      padding: 15px 20px;
      width: 100px;
      border-radius: 10px;
    }
  }
}
</style>