调取本地摄像头图拍照，并可对照片裁剪预览

安装 vue-cropper 插件、你可以通过 npm 或 yarn 安装：

npm install vue-cropper --save # 或者 yarn add vue-cropper

代码：

<template>

  <div>

    <input type="file" @change="onFileChange">

    <cropper ref="cropper" :src="imageSrc"></cropper>

    <button @click="cropImage">裁剪并预览</button>

    <img v-if="croppedImage" :src="croppedImage" alt="Cropped Image">

  </div>

</template>

<script>

import VueCropper from 'vue-cropper';

export default {

  components: {

    Cropper: VueCropper

  },

  data() {

    return {

      imageSrc: '',

      croppedImage: null

    };

  },

  methods: {

    onFileChange(e) {

      const file = e.target.files[0];

      if (!file) {

        return;

      }

      const reader = new FileReader();

      reader.onload = (e) => {

        this.imageSrc = e.target.result;

      };

      reader.readAsDataURL(file);

    },

    cropImage() {

      const cropper = this.$refs.cropper;

      this.croppedImage = cropper.getCroppedCanvas().toDataURL();

    }

  }

};

</script>