# t-crop

Crop 裁剪

t-crop 组件介绍

t-crop 是一个图片裁剪组件，使用 Canvas 实现，支持 PC 端鼠标滚轮操作，支持手势缩放、移动、旋转等功能，提供旋转、缩放、导出等 API。组件适用于需要图片裁剪功能的场景，如头像上传、图片编辑等。

t-crop 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-crop 基础用法

基础用法参考 demo/crop/crop.uvue，通过 src 属性设置需要裁剪的图片地址，通过 ref 调用组件方法进行操作。

<template>
	<view class="twh-100% bg-#000 dr">
		<t-crop ref='crop'
				:src="url"
				class="twh-100%"></t-crop>
		<view class="fl h-100 plr-30 fjcb faic da dlb-0 w-100%">
			<t-text :hover="true"
					@click="cancel"
					type="primary"
					:fore="true">取消</t-text>
			<t-icon name="photo"
					@click="getPhoto"
					:class="[`s-28`]"
					:hover="true"
					:fore="true"
					type="primary"></t-icon>
			<t-icon name="xuanzhuan"
					@click="rotate"
					:class="[`s-30`]"
					:hover="true"
					:fore="true"
					type="primary"></t-icon>
			<t-button type="primary"
					  @click="save"
					  class="w-60"
					  size="small"
					  text-class="sfwb">确定</t-button>
		</view>
	</view>
</template>

<script setup>
	const crop = ref<TCropComponentPublicInstance | null>(null)
	const url = ref<string>('/static/image/crop.jpg')

	function getPhoto() {
		uni.chooseImage({
			count: 1,
			success: (res : ChooseImageSuccess) => {
				url.value = res.tempFilePaths[0]
				console.log(url.value)
			}
		})
	}

	function cancel() {
		uni.navigateBack()
	}

	function save() {
		const ins = crop.value as TCropComponentPublicInstance
		ins.takeSnapshot().then((res : string) => {
			uni.previewImage({ urls: [res] })
		})
	}

	function rotate() {
		const ins = crop.value as TCropComponentPublicInstance
		ins.rotate()
	}

	function zoomIn() {
		const ins = crop.value as TCropComponentPublicInstance
		ins.zoom(0.01)
	}

	function zoomOut() {
		const ins = crop.value as TCropComponentPublicInstance
		ins.zoom(-0.01)
	}
</script>

t-crop Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	''
size	组件尺寸，可选 large、medium、small、mini	string	''
src	裁剪的图片地址	string	''

t-crop Events

事件名	说明	回调参数
click	点击时触发	UniPointerEvent
initFinished	组件初始化完成时触发，返回组件节点信息	NodeInfo
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-
transitionend	动画结束时触发	-

Methods

方法名	说明	参数	返回值
takeSnapshot	获取裁剪后的图片	-	Promise<string>
rotate	旋转图片	-	-
zoom	缩放图片	scale: number	-

t-crop Slots

插槽名	说明
default	默认插槽