uniapp-image-cropper

一个基于uni-app的图片裁剪组件，支持Vue2和Vue3。

特性

• 🎯 支持多种裁剪比例
• 📱 适配各种uni-app平台
• 🔄 支持图片旋转
• 📏 支持自定义裁剪尺寸
• 🎨 美观的UI界面
• ⚡ Vue2和Vue3双版本兼容

安装

npm install uniapp-image-cropper

使用

局部注册（按需引入）

方式1：直接引入组件（推荐）

// Vue2
import { CropperFix, CropperPis } from 'uniapp-image-cropper'

export default {
  components: {
    CropperFix,
    CropperPis
  }
}

// Vue3 直接引入则可
import { CropperFix, CropperPis } from 'uniapp-image-cropper'

在页面中使用

<template>
  <view>
    <!--  自由裁剪组件  -->
    <CropperPis
        v-model="filesList" 
        :max-count="9" 
        :max-size="maxSize" 
        :cropper-width="500"
        :cropper-height="500"
        :cropper-radius="10"
        :previewWidth="160"
        :previewHeight="160"
        :mode="'free'"
        :watermark="''"
        :watermark-type="1"
        :watermark-image="''"
        @upload-success="onUploadSuccess"
        @upload-error="onUploadError" 
		    @delete="onDelete" 
    />
    
    <!--  固定比例裁剪组件 -->
    <CropperFix
       v-model="filesList"
        :previewWidth="160"
        :previewHeight="160"
        :max-count="9"
        :max-size="maxSize" 
        :cropper-width="200"
        :cropper-height="200"
        :cropper-radius="10"
        @upload-success="onUploadSuccess"
        @upload-error="onUploadError" 
        @delete="onDelete" 
    />
  </view>
</template>

<script>
// 按需引入
import { CropperPis, CropperFix } from 'uniapp-image-cropper'

export default {
  components: {
    CropperPis,
    CropperFix
  },
  data() {
    return {
      imageList1: [],
      imageList2: []
    }
  },
  methods: {
    onUploadSuccess(file) {
      console.log('上传成功:', file)
    }
  }
}
</script>

API

CropperFix Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | cropperWidth | 裁剪器宽度 | Number/String | 500 | | cropperHeight | 裁剪器高度 | Number/String | 500 | | cropperRadius | 裁剪器圆角半径 | Number/String | 10 | | modelValue/value | 图片列表 (Vue3使用modelValue，Vue2使用value) | Array | [] | | maxSize | 最大文件大小(字节) | Number | 102400 | | maxCount | 最大上传数量 | Number | 9 | | accept | 接受的文件类型 | String | 'image/*' | | disabled | 是否禁用 | Boolean | false | | multiple | 是否支持多选 | Boolean | false | | previewWidth | 预览图宽度 | Number/String | 160 | | previewHeight | 预览图高度 | Number/String | 160 |

CropperPis Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | mode | 裁剪模式：'free'自由裁剪, 'fixed'固定模式, 'ratio'等比缩放 | String | 'free' | | cropperWidth | 裁剪框宽度 | Number/String | 200 | | cropperHeight | 裁剪框高度 | Number/String | 200 | | maxWidth | 输出图片最大宽度 | Number/String | 1024 | | maxHeight | 输出图片最大高度 | Number/String | 1024 | | modelValue/value | 图片列表 (Vue3使用modelValue，Vue2使用value) | Array | [] | | maxSize | 最大文件大小(字节) | Number | 102400 | | maxCount | 最大上传数量 | Number | 9 | | accept | 接受的文件类型 | String | 'image/*' | | disabled | 是否禁用 | Boolean | false | | multiple | 是否支持多选 | Boolean | false | | watermark | 水印文字 | String | '' | | watermarkType | 水印样式 | Number | 1 | | previewWidth | 预览图宽度 | Number/String | 160 | | previewHeight | 预览图高度 | Number/String | 160 |

Events

| 事件名 | 说明 | 参数 | |--------|------|------| | update:modelValue | 图片列表更新 (Vue3) | (value: Array) | | upload-success | 上传成功 | (file: Object) | | upload-error | 上传失败 | (error: Object) | | delete | 删除图片 | ({ file: Object, index: Number }) |

兼容性说明

本组件同时支持Vue2和Vue3：

• Vue2: 使用 v-model 进行数据绑定
• Vue3: 使用 v-model 进行数据绑定

组件会自动检测Vue版本并使用相应的API。

常见问题

Q: 按需引入时样式不显示怎么办？

A: 在uni-app中，组件样式通常会自动被包含。如果遇到样式问题，请尝试以下解决方案：

1. 确保正确引入组件：

   import { CropperFix, CropperPis } from 'uniapp-image-cropper'

平台兼容性

| 平台 | 支持 | |------|------| | H5 | ✅ | | 微信小程序 | ✅ | | 支付宝小程序 | ✅ | | 百度小程序 | ✅ | | 字节跳动小程序 | ✅ | | QQ小程序 | ✅ | | App | ✅ |

版本更新日志

v1.0.11 (2024-12-20)

• 修复样式不生效的问题，调整CSS选择器
• 修复 CropperPis 组件的 pramisImage 兼容vue2 和 vue3.
• 优化组件 props 传递逻辑

v1.0.0 (2024-12-20)

• 初始版本发布
• 基本的图片裁剪功能
• 支持固定比例和自由裁剪模式

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

支持

如果这个项目对你有帮助，请给个 ⭐ 支持一下！