Cropper 图片剪裁 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# 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!

# 水印功能 3.5.41

可以为剪裁后的图片添加水印，支持自定义水印文本、颜色、角度等：

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

<script>
export default {
	data() {
		return {
			watermark: {
				showOnSave: true,
				text: '测试水印',
				color: 'rgba(0, 0, 0, 0.1)',
			}
		}
	}
};
</script>
✅ Copy success!

# 水印配置对象详细说明

watermark 对象包含以下属性：

属性名	类型	默认值	说明
text	String	''	水印文本内容
bold	Boolean	false	水印文本是否加粗
color	String	'rgba(0, 0, 0, 0.2)'	水印颜色，支持 rgba 格式
fontSize	Number	18	水印字体大小
fontFamily	String	'Arial'	水印字体族
rotate	Number	-30	水印旋转角度（度）
spacing	Number	100	水印间距
single	Boolean	false	是否只显示单个水印（true 为单个，false 为平铺）

# 水印使用示例

1. 基础水印

watermark: {
    text: '测试水印',
    fontSize: 16,
    rotate: -30
}
✅ Copy success!

2. 单个水印

watermark: {
    text: '测试水印',
    fontSize: 50,
	spacing: 120,
    rotate: 0,
    single: true
}
✅ Copy success!

3. 平铺水印

watermark: {
    text: '测试水印',
    color: 'rgba(0, 0, 255, 0.2)',
    fontSize: 14,
    rotate: 0,
    spacing: 80,
    single: false
}
✅ 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
openType 3.6.43	微信小程序开放能力，设置为chooseAvatar后，可选择微信头像	String	''	chooseAvatar
watermark 3.5.41	水印配置对象	Object	{}	-

# Events

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

← Qrcode 二维码 Table 表格 →