vue-admin-template中使用<image-cropper>

在 vue-admin-template 中使用 <image-cropper> 组件，您可以按照以下步骤进行操作：

1. 首先，确保您已经安装了需要的依赖。您可以使用以下命令安装 vue-cropperjs 包：

   npm install vue-cropperjs --save

2. 在您需要使用 <image-cropper> 组件的页面或组件中，引入 <image-cropper> 组件。您可以使用以下代码：

   <template>
     <div>
       <image-cropper
         ref="cropper"
         :src="imageSrc"
         :aspect-ratio="aspectRatio"
         :output-size="outputSize"
         :output-type="outputType"
       ></image-cropper>
       <button @click="cropImage">Crop</button>
     </div>
   </template>

   <script>
   import ImageCropper from 'vue-cropperjs';

   export default {
     components: {
       ImageCropper,
     },
     data() {
       return {
         imageSrc: 'path/to/your/image.jpg',
         aspectRatio: 16 / 9,
         outputSize: {
           width: 400,
           height: 225,
         },
         outputType: 'jpeg',
       };
     },
     methods: {
       cropImage() {
         const cropper = this.$refs.cropper.getCropper();
         const croppedImage = cropper.getCroppedCanvas({
           width: this.outputSize.width,
           height: this.outputSize.height,
           imageSmoothingEnabled: true,
           imageSmoothingQuality: 'high',
         });
         // Do something with the cropped image
         console.log(croppedImage.toDataURL(this.outputType));
       },
     },
   };
   </script>

3. 在以上代码中，您需要设置以下属性：

- `imageSrc`：要裁剪的图像的路径或 URL。
- `aspectRatio`：裁剪的宽高比（宽度除以高度）。
- `outputSize`：裁剪后输出的图像大小。
- `outputType`：裁剪后输出的图像类型。

4. 在 `cropImage` 方法中，您可以使用 cropper 对象的方法来获取裁剪后的图像。您可以根据需要对裁剪后的图像进行进一步处理。

请注意，上述代码只是一个示例，您可能需要根据您的具体需求进行适当的修改。另外，确保您已正确引入和注册了 vue-cropperjs 组件。