youxi-app/pages/demo/other/cropper.uvue

<template>
	<cl-page>
		<view class="cropper-demo">
			<cl-cropper
				:src="imageSrc"
				:max-scale="3"
				:min-scale="0.5"
				@crop="onCrop"
				@load="onImageLoad"
			></cl-cropper>
			
			<!-- 选择图片按钮 -->
			<view class="select-image-btn" @tap="selectImage">
				<cl-button type="primary" size="small">选择图片</cl-button>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const imageSrc = ref("https://unix.cool-js.com/images/demo/avatar.jpg");

function selectImage() {
	// 选择图片
	uni.chooseImage({
		count: 1,
		sizeType: ["original", "compressed"],
		sourceType: ["album", "camera"],
		success: (res) => {
			if (res.tempFilePaths.length > 0) {
				imageSrc.value = res.tempFilePaths[0];
			}
		}
	});
}

function onCrop(result: any) {
	console.log("裁剪结果:", result);
	uni.showToast({
		title: "裁剪完成",
		icon: "success"
	});
}

function onImageLoad(e: any) {
	console.log("图片加载完成:", e);
}
</script>

<style lang="scss" scoped>
.cropper-demo {
	@apply relative w-full h-full;
}

.select-image-btn {
	@apply absolute top-4 right-4;
	z-index: 10;
}
</style>