85 lines
2.1 KiB
Plaintext
85 lines
2.1 KiB
Plaintext
<template>
|
|
<cl-page>
|
|
<view class="p-4">
|
|
<cl-text size="lg" bold class="mb-4">图片裁剪器演示</cl-text>
|
|
|
|
<view class="mb-4">
|
|
<cl-text size="sm" color="info" class="mb-2">操作说明：</cl-text>
|
|
<cl-text size="xs" color="placeholder" class="block mb-1"
|
|
>• 拖拽图片进行移动</cl-text
|
|
>
|
|
<cl-text size="xs" color="placeholder" class="block mb-1"
|
|
>• 双指缩放图片（围绕双指中心缩放）</cl-text
|
|
>
|
|
<cl-text size="xs" color="placeholder" class="block mb-1"
|
|
>• 拖拽裁剪框进行移动</cl-text
|
|
>
|
|
<cl-text size="xs" color="placeholder" class="block mb-1"
|
|
>• 拖拽裁剪框四角进行缩放</cl-text
|
|
>
|
|
<cl-text size="xs" color="placeholder" class="block mb-1"
|
|
>• 缩放时会显示辅助线</cl-text
|
|
>
|
|
<cl-text size="xs" color="warning" class="block"
|
|
>• 图片会自动保持不小于裁剪框大小</cl-text
|
|
>
|
|
</view>
|
|
|
|
<view class="flex justify-center">
|
|
<cl-cropper
|
|
:src="imageSrc"
|
|
:width="320"
|
|
:height="320"
|
|
:crop-width="200"
|
|
:crop-height="200"
|
|
:max-scale="3"
|
|
:min-scale="0.5"
|
|
@crop="onCrop"
|
|
@load="onImageLoad"
|
|
></cl-cropper>
|
|
</view>
|
|
|
|
<view class="mt-4 space-y-2">
|
|
<cl-button @tap="selectImage" block>选择图片</cl-button>
|
|
<cl-button @tap="useDefaultImage" type="light" block>使用默认图片</cl-button>
|
|
</view>
|
|
</view>
|
|
</cl-page>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from "vue";
|
|
|
|
const imageSrc = ref("/static/logo.png");
|
|
|
|
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 useDefaultImage() {
|
|
imageSrc.value = "/static/logo.png";
|
|
}
|
|
|
|
function onCrop(result: any) {
|
|
console.log("裁剪结果:", result);
|
|
uni.showToast({
|
|
title: "裁剪完成",
|
|
icon: "success"
|
|
});
|
|
}
|
|
|
|
function onImageLoad(e: any) {
|
|
console.log("图片加载完成:", e);
|
|
}
|
|
</script>
|