Crop 裁剪

显示和选择颜色的组件，可以自定义颜色值和面板类型。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="裁剪" class="p.30">
		<t-card class="mb.30" title="t-crop 裁剪" sub-title="Canvas实现,PC端支持鼠标滚轮,支持手势缩放移动等.开放旋转缩放导出等API,实现自定义布局"></t-card>
		<t-col class="h.1000-tdr">
			<t-crop ref='crop'
				src="https://cbu01.alicdn.com/img/ibank/O1CN01iRLosd1k00ZXtTXO8_!!2212762114620-0-cib.jpg"
				class="bg.#000"></t-crop>
		</t-col>
		<t-row class="p.30-mt.30-tdr-tdb">
			<t-button class="mr.30" size='mini' @click="save">保存</t-button>
			<t-button class="mr.30" size='mini' @click="rotate">旋转</t-button>
			<t-button class="mr.30" size='mini' @click="zoomIn">放大</t-button>
			<t-button class="mr.30" size='mini' @click="zoomOut">缩小</t-button>
		</t-row>
	</t-page>
</template>

<script setup>
	const crop = ref<TCropComponentPublicInstance | null>(null)
	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>

Props

名称	描述	类型	默认值	可选值
src	图片的来源路径	String	''	-

Events

事件名	描述	回调参数
-	-	-

Methods

方法名	说明	参数	返回值
takeSnapshot	获取裁剪后的图片数据	-	string
zoom	缩放图片	scale: number	-
rotate	旋转图片	-	每次调用旋转图片90度
drawImage	重新绘制图片	-	根据当前缩放比例、旋转角度和位移重新绘制图片