uniapp-image-cropper

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

特性

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

安装

1npm install uniapp-image-cropper

使用

局部注册（按需引入）

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

1// Vue2
2import { CropperFix, CropperPis } from 'uniapp-image-cropper'
3
4export default {
5  components: {
6    CropperFix,
7    CropperPis
8  }
9}
10
11// Vue3 直接引入则可
12import { CropperFix, CropperPis } from 'uniapp-image-cropper'
13

在页面中使用

1<template>
2  <view>
3    <!--  自由裁剪组件  -->
4    <CropperPis
5        v-model="filesList" 
6        :max-count="9" 
7        :max-size="maxSize" 
8        :cropper-width="500"
9        :cropper-height="500"
10        :cropper-radius="10"
11        :previewWidth="160"
12        :previewHeight="160"
13        :mode="'free'"
14        :watermark="''"
15        :watermark-type="1"
16        :watermark-image="''"
17        @upload-success="onUploadSuccess"
18        @upload-error="onUploadError" 
19		    @delete="onDelete" 
20    />
21    
22    <!--  固定比例裁剪组件 -->
23    <CropperFix
24       v-model="filesList"
25        :previewWidth="160"
26        :previewHeight="160"
27        :max-count="9"
28        :max-size="maxSize" 
29        :cropper-width="200"
30        :cropper-height="200"
31        :cropper-radius="10"
32        @upload-success="onUploadSuccess"
33        @upload-error="onUploadError" 
34        @delete="onDelete" 
35    />
36  </view>
37</template>
38
39<script>
40// 按需引入
41import { CropperPis, CropperFix } from 'uniapp-image-cropper'
42
43export default {
44  components: {
45    CropperPis,
46    CropperFix
47  },
48  data() {
49    return {
50      imageList1: [],
51      imageList2: []
52    }
53  },
54  methods: {
55    onUploadSuccess(file) {
56      console.log('上传成功:', file)
57    }
58  }
59}
60</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. 确保正确引入组件：

   1import { 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！

支持

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