更新记录

2.0.3（2025-11-30） 下载此版本

更新ratio比例设置文档

2.0.2（2025-11-30） 下载此版本

设置ratio自定义比例

2.0.1（2025-05-30） 下载此版本

修改组件描述

平台兼容性

uni-app(3.6.15)

xxm-cropper-image

适用于uniadmin的对图片进行裁剪，支持自由尺寸、固定常见比例（9/16、9/20、16/9）,可以通过鼠标滚轮进行缩放，可以对图片进行旋转。

下载

点击右上角“下载插件并导入HBuilderX”，将插件下载到本地uni_modules目录中

安装

无需import，可以直接在项目中使用该xxm-cropper-image组件

用法

<button @click="handleCropper">触发裁剪</button>

<xxm-cropper-image 
    ref="xxmCropperRef" 
    :maxImgSize="1200" 
    :tempurl="formData.avatar"
    @confirm="cropperChange"
>
</xxm-cropper-image>

const xxmCropperRef = ref(null);
//触发图片裁剪弹窗
const handleCropper =  ()=>{
    xxmCropperRef.value.open();
}
//点击确认裁剪按钮触发事件
const cropperChange = (e)=>{
    //获取blob格式的本地图
    console.log(e)
}

Props

事件 Events

交流反馈

如果在使用中遇到问题，可以内交流：