vue3图片裁剪自定义输出指定宽高

在Vue3中，你可以使用一些第三方库如`vue-quill-image-editor`或`vue-cropperjs`来实现在组件中添加图片裁剪功能，并能够自定义输出的特定宽高。这两个库都提供了API允许开发者设置裁剪后的尺寸。

例如，使用`vue-cropperjs`，首先需要安装依赖：

npm install vue-cropperjs

然后在你的Vue组件里，可以这样配置：

<template>
  <div>
    <cropper :src="sourceImage" :output-size="customSize" @result="onResult"></cropper>
  </div>
</template>

<script>
import { ref } from 'vue';
import Cropper from 'vue-cropperjs';

export default {
  components: {
    Cropper,
  },
  data() {
    return {
      sourceImage: '', // 初始化时传入的图片URL
      customSize: { width: 400, height: 300 }, // 自定义输出宽度和高度
      resultImage: null, // 裁剪后图片的结果
    };
  },
  methods: {
    onResult(image) {
      this.resultImage = image; // 当裁剪完成后，更新结果图片
    },
  },
};
</script>

在这个例子中，`:output-size`属性用于设定裁剪后的尺寸，`@result`事件监听裁剪完成并获取裁剪后的图片数据。