Tui Plus Vapor

Appearance

t-crop ​

Crop 裁剪

组件介绍 ​

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

平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

基础用法 ​

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

vue
<template>
  <view class="h-800px">
    <t-crop ref="cropRef" :src="imageSrc" class="twh-100%"></t-crop>
  </view>
  <view class="flex space-x-20 mt-30">
    <t-button @click="rotateImage">旋转</t-button>
    <t-button @click="zoomIn">放大</t-button>
    <t-button @click="zoomOut">缩小</t-button>
    <t-button @click="exportImage">导出</t-button>
  </view>
  <view v-if="exportedImage" class="mt-30">
    <t-image :src="exportedImage" mode="aspectFill" class="w-200 h-200"></t-image>
  </view>
</template>

<script setup>
const cropRef = ref(null);
const imageSrc = ref('https://example.com/image.jpg');
const exportedImage = ref('');

function rotateImage() {
  cropRef.value?.rotate();
}

function zoomIn() {
  cropRef.value?.zoom(0.1);
}

function zoomOut() {
  cropRef.value?.zoom(-0.1);
}

async function exportImage() {
  const result = await cropRef.value?.takeSnapshot();
  exportedImage.value = result;
}
</script>

Props ​

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

Events ​

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

Methods ​

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

Slots ​

插槽名说明
default默认插槽