uView Next

# Cropper 图片剪裁 新

图片剪裁组件，支持图片选择、裁剪、旋转等功能，适用于头像上传、图片编辑等场景。

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

组件会在显示时自动弹出图片选择界面，用户选择图片后可以进行裁剪操作。

<template>
    <view>
        <u-button @click="showCropper = true" type="primary">打开图片裁剪</u-button>
        <u-cropper v-if="showCropper" @confirm="onCropConfirm" @close="onCropperClose"></u-cropper>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showCropper: false
        }
    },
    methods: {
        onCropConfirm(result) {
            console.log('裁剪结果：', result);
            // result 为裁剪后的图片临时路径
        },
        onCropperClose() {
            this.showCropper = false;
        }
    }
}
</script>

✅ Copy success!

# 自定义裁剪尺寸

可以通过设置 rectWidth、rectHeight、width、height 等属性来自定义裁剪框大小和输出图片尺寸。

<u-cropper
    v-if="showCropper"
    :rect-width="300"
    :rect-height="100" 
    :width="300"
    :height="100"
    @confirm="onCropConfirm"
    @close="onCropperClose"
></u-cropper>

✅ Copy success!

# 圆形裁剪框

设置 shape 为 circle 可以使用圆形裁剪框，适用于头像裁剪场景。

<u-cropper
    v-if="showCropper"
    shape="circle"
    @confirm="onCropConfirm"
    @close="onCropperClose"
></u-cropper>

✅ Copy success!

# API

# Props

参数 说明 类型 默认值 可选值
shape 裁剪框形状 String square square / circle
autoChoose 每次显示时是否自动打开选择图片 Boolean false true / false
rectWidth 裁剪框宽度，单位px String / Number 200 -
rectHeight 裁剪框高度，单位px String / Number 200 -
width 输出图片宽度，单位px String / Number 200 -
height 输出图片高度，单位px String / Number 200 -
fileType 输出图片格式 String jpg jpg / png
showGrid 是否显示网格线 Boolean true true / false

# Events

事件名 说明 回调参数
change 选择图片时触发 imagePath: 原始图片路径
open 打开裁剪弹窗时触发 -
close 关闭裁剪弹窗时触发 -
confirm 确认裁剪时触发 result: 裁剪后的图片临时路径

← LoadMore 加载更多 →