Vue フォーム処理でフォームフィールドの画像トリミングを実装する方法

npm install vue-cropper

import VueCropper from 'vue-cropper'

Vue.use(VueCropper)

<template>
  <div>
    <input type="file" @change="onFileChange">
    <vue-cropper ref="cropper" :src="src" :options="cropperOptions"></vue-cropper>
    <button @click="crop">裁剪图片</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        src: '', // 选择的图片文件路径
        cropperOptions: {
          aspectRatio: 1, // 设置裁剪区域的宽高比
          viewMode: 1 // 设置裁剪框的显示模式
        }
      }
    },
    methods: {
      onFileChange(e) {
        const file = e.target.files[0]
        this.src = URL.createObjectURL(file)
      },
      crop() {
        const cropper = this.$refs.cropper
        const croppedDataUrl = cropper.getCroppedCanvas().toDataURL() // 获取裁剪后的图片数据
        // 将裁剪后的图片数据提交到后端或进行其他操作
      }
   }
  }
</script>

<template>
  <div>
    <ImageCrop @crop="onCrop"></ImageCrop>
    <button @click="submit">提交</button>
  </div>
</template>
<script>
  import ImageCrop from './ImageCrop.vue'
  
  export default {
    components: {
      ImageCrop
    },
    data() {
      return {
        croppedImageUrl: '' // 裁剪后的图片URL
      }
    },
    methods: {
      onCrop(dataUrl) {
        this.croppedImageUrl = dataUrl
      },
      submit() {
        // 提交表单，包括裁剪后的图片数据
        console.log(this.croppedImageUrl)
      }
   }
  }
</script>