好用的Vue3图片裁切插件

在 Vue 3 中，以下是一些好用的图片裁剪插件：

1. vue-img-cutter:

   • 这个插件功能强大，提供了灵活的裁剪工具和选项，支持多种裁剪比例和尺寸设置，适合各种项目需求。
   • 文档链接：vue-img-cutter

2. vue-cropperjs:

   • 基于 Cropper.js 的 Vue 封装，提供了丰富的裁剪功能，包括旋转、缩放和移动。
   • 文档链接：vue-cropperjs

3. vue-easy-crop:

   • 简单易用，支持逐步裁剪和动态预览，适合需要快速集成裁剪功能的项目。
   • 文档链接：vue-easy-crop

4. vue-cropper:

   • 封装了 Cropper.js，同样支持多种裁剪方式和自定义样式，适合需要高度自定义的项目。
   • 文档链接：vue-cropper

以上插件都有各自的特点，选择时可以根据项目的具体需求和开发体验来决定。

咱们以其中一个vue-img-cutter作为样例测试下裁切效果

# 安装 vue-img-cutter
pnpm add vue-img-cutter

<template>
  <ImgCutter
    :cutWidth="300"
    :cutHeight="300"
    :tool="true"
    v-on:cutDown="handleCut"
  />
</template>

<script lang="ts" setup>
// ts的话 需要声明一下 declare module 'vue-img-cutter
import ImgCutter from 'vue-img-cutter'

// 定义数据结构类型
interface CroppedData {
  blob: Blob
  dataURL: string
  file: File
  fileName: string
  index: number | null
}

const handleCut = (croppedData: CroppedData) => {
  console.log('裁剪后的数据:', croppedData)
}
</script>

效果如图

个人还是比较推荐的，感觉裁切后的这个数据格式也很ok~ 其他的几种自行测试哦按着文档来即可~