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

基本使用

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

<template>
    <view>
        <un-button @click="showCropper = true" type="primary">打开图片裁剪</un-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>

自定义裁剪尺寸

可以通过设置 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>

圆形裁剪框

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

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

水印功能 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>

水印配置对象详细说明

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
}

2. 单个水印

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

3. 平铺水印

watermark: {
    text: '测试水印',
    color: 'rgba(0, 0, 255, 0.2)',
    fontSize: 14,
    rotate: 0,
    spacing: 80,
    single: false
}

API

Props

参数	说明	类型	默认值
shape	裁剪框形状	Enum	square
autoChoose	每次显示时是否自动打开选择图片	Boolean	false
rectWidth	裁剪框宽度，单位px	String / Number	200
rectHeight	裁剪框高度，单位px	String / Number	200
width	输出图片宽度，单位px	String / Number	200
height	输出图片高度，单位px	String / Number	200
fileType	输出图片格式	Enum	jpg
showGrid	是否显示网格线	Boolean	true
openType 3.6.43	微信小程序开放能力，设置为chooseAvatar后，可选择微信头像	String	''
watermark 3.5.41	水印配置对象	Object	{}

Events

事件名	说明	回调参数
change	选择图片时触发	Function
open	打开裁剪弹窗时触发	Function
close	关闭裁剪弹窗时触发	Function
confirm	确认裁剪时触发	Function
error	出错时触发	Function

Scss 变量

关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。

变量名	默认值	说明
$un-cropper-z-index	11000	组件 z-index 值
$un-cropper-bg-color	#000	组件背景颜色
$un-cropper-mask-box-shadow	0 0 0 100vw rgba(0, 0, 0, 0.5)	遮罩层阴影
$un-cropper-mask-border	1px solid rgba(255, 255, 255, .5)	裁剪框边框
$un-cropper-mask-grid-border	1px dashed rgba(255, 255, 255, .5)	网格线边框
$un-cropper-edge-border-width	3px	裁剪框边缘线宽度
$un-cropper-edge-border-color	#ffffff	裁剪框边缘线颜色
$un-cropper-edge-size	15px	裁剪框边缘线大小
$un-cropper-tools-padding	20px	工具栏内边距
$un-cropper-button-width	70px	按钮宽度
$un-cropper-button-height	40px	按钮高度
$un-cropper-button-text-color	$text-color-inverted	按钮文本颜色
$un-cropper-button-text-font-weight	$font-bold	按钮文本字体粗细
$un-cropper-button-text-line-height	40px	按钮文本行高