引入组件

局部引入

const FPictureCropper = defineAsyncComponent(
  () => import('@/components/formaui/f-picture-cropper/f-picture-cropper.vue')
)

基础用法

演示入口页提供「组件默认使用」「自定义操作栏」两个入口（对齐 ThorUI picture-cropper 官方演示）。

默认使用：全屏组件 + 顶部「选择图片」「锁定裁剪/自由裁剪」+ 内置底栏。

<f-picture-cropper :src="imageUrl" :is-lock-ratio="isLockRatio" @crop="onCrop" />

自定义操作栏：isCustom + cutTrigger 触发裁剪，rotateAngle 控制旋转。

<f-picture-cropper :src="imageUrl" is-custom :rotate-angle="rotateAngle" :cut-trigger="cutTrigger" @crop="onCrop" />

裁剪子页建议在 pages.json 中设置 "disableScroll": true 禁止页面回弹。

closeOnCancel属性：点击取消是否执行 navigateBack（全屏裁剪页保持默认true即可）

<f-picture-cropper :src="imageSrc" :close-on-cancel="false" @cancel="showCropper = false" />

裁剪框尺寸

width / height属性：裁剪框宽高（单位 px，默认280）

<f-picture-cropper :src="imageSrc" :width="300" :height="200" />

minWidth / minHeight / maxWidth / maxHeight属性：裁剪框尺寸限制（px）

<f-picture-cropper :src="imageSrc" :min-width="120" :max-width="360" />

锁定与比例

isLockWidth / isLockHeight / isLockRatio属性：锁定裁剪框宽高或比例（宽高均锁定时不可拖动裁剪框）

<f-picture-cropper :src="imageSrc" is-lock-ratio />

图片交互

isLimitMove属性：是否限制图片移动范围（默认true）

isRotateDisabled属性：是否禁用触摸旋转（默认true）

minScale / maxScale属性：图片缩放范围（默认0.5～2）

rotateAngle属性：初始旋转角度

<f-picture-cropper :src="imageSrc" :rotate-angle="90" :min-scale="0.8" :max-scale="3" />

输出与样式

scaleRatio属性：输出图相对裁剪框的像素比（默认2）

quality属性：输出质量 (0, 1]（默认0.8）

isBase64属性：是否返回 base64（H5 端 url 字段亦可能为 base64）

<f-picture-cropper :src="imageSrc" :scale-ratio="3" :quality="0.9" />

borderColor / edgeColor / edgeWidth / edgeBorderWidth / edgeOffsets属性：裁剪框与角标样式

<f-picture-cropper :src="imageSrc" border-color="rgba(255,255,255,0.3)" edge-color="#5677fc" edge-width="40rpx" />

自定义操作栏

isCustom属性：隐藏底部默认操作栏（默认false）

cutTrigger属性：isCustom 为 true 时，值变化触发裁剪

<f-picture-cropper :src="imageSrc" is-custom :cut-trigger="cutTrigger" @crop="onCrop" />
<f-button @click="cutTrigger++">完成裁剪</f-button>

属性

属性名	类型	说明	默认值
src	string	待裁剪图片地址	''
width	number	裁剪框宽度（px）	280
height	number	裁剪框高度（px）	280
minWidth	number	裁剪框最小宽度（px）	100
minHeight	number	裁剪框最小高度（px）	100
maxWidth	number	裁剪框最大宽度（px）	360
maxHeight	number	裁剪框最大高度（px）	360
borderColor	string	裁剪框边框颜色	rgba(255,255,255,0.1)
edgeColor	string	角标颜色	#FFFFFF
edgeWidth	string	角标宽高	34rpx
edgeBorderWidth	string	角标边框宽度	6rpx
edgeOffsets	string	角标偏移	6rpx
isLockWidth	boolean	锁定裁剪框宽度	false
isLockHeight	boolean	锁定裁剪框高度	false
isLockRatio	boolean	锁定裁剪框比例	false
scaleRatio	number	输出图相对裁剪框比例	2
quality	number	输出质量 (0, 1]	0.8
rotateAngle	number	图片旋转角度	0
minScale	number	图片最小缩放比	0.5
maxScale	number	图片最大缩放比	2
isRotateDisabled	boolean	禁用触摸旋转	true
isLimitMove	boolean	限制图片移动范围	true
isCustom	boolean	隐藏底部操作栏	false
cutTrigger	number | boolean	isCustom 时触发裁剪	0
isBase64	boolean	是否返回 base64	false
isLoading	boolean	裁剪时显示 loading	true
rotateIcon	string	旋转按钮图标	/static/components/cropper/img_rotate.png
closeOnCancel	boolean	取消时是否 navigateBack	true

事件

事件名	说明	回调参数
ready	组件初始化完成	-
load	图片加载完成	-
angleInit	旋转角度重置为 0°	-
change	裁剪区域或图片变化	FPictureCropperChangeDetail
crop	裁剪完成	FPictureCropperCropDetail
cancel	点击取消	-

说明

• 组件为全屏固定层，一般通过 v-if 控制显隐
• 旋转图标需将 static/components/cropper/ 复制到项目 static 目录，或通过 rotateIcon / uni.$formaui.fPictureCropper 指定路径
• 微信小程序端裁剪网络图时，组件内部会自动 downloadFile 转本地路径