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！

支持

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