90 lines
2.4 KiB
Vue
90 lines
2.4 KiB
Vue
<script setup lang="tsx">
|
||
import avatar from "./avatar.png";
|
||
import { ref, onBeforeUnmount } from "vue";
|
||
import ReCropper from "@/components/ReCropper";
|
||
import { formatBytes } from "@pureadmin/utils";
|
||
|
||
defineOptions({
|
||
name: "Cropping"
|
||
});
|
||
|
||
const infos = ref();
|
||
const popoverRef = ref();
|
||
const refCropper = ref();
|
||
const showPopover = ref(false);
|
||
const cropperImg = ref<string>("");
|
||
|
||
function onCropper({ base64, blob, info }) {
|
||
console.log(blob);
|
||
infos.value = info;
|
||
cropperImg.value = base64;
|
||
}
|
||
|
||
onBeforeUnmount(() => {
|
||
popoverRef.value.hide();
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="font-medium">
|
||
图片裁剪，基于开源的
|
||
<el-link
|
||
href="https://fengyuanchen.github.io/cropperjs/"
|
||
target="_blank"
|
||
style="margin: 0 4px 5px; font-size: 16px"
|
||
>
|
||
cropperjs
|
||
</el-link>
|
||
进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单）
|
||
</span>
|
||
</div>
|
||
<el-link
|
||
class="mt-2"
|
||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/cropping"
|
||
target="_blank"
|
||
>
|
||
代码位置 src/views/components/cropping
|
||
</el-link>
|
||
</template>
|
||
<div v-loading="!showPopover" element-loading-background="transparent">
|
||
<el-popover
|
||
ref="popoverRef"
|
||
:visible="showPopover"
|
||
placement="right"
|
||
width="300px"
|
||
>
|
||
<template #reference>
|
||
<ReCropper
|
||
ref="refCropper"
|
||
class="w-[30vw]"
|
||
:src="avatar"
|
||
circled
|
||
@cropper="onCropper"
|
||
@readied="showPopover = true"
|
||
/>
|
||
</template>
|
||
<div class="flex flex-wrap justify-center items-center text-center">
|
||
<el-image
|
||
v-if="cropperImg"
|
||
:src="cropperImg"
|
||
:preview-src-list="Array.of(cropperImg)"
|
||
fit="cover"
|
||
/>
|
||
<div v-if="infos" class="mt-1">
|
||
<p>
|
||
图像大小：{{ parseInt(infos.width) }} ×
|
||
{{ parseInt(infos.height) }}像素
|
||
</p>
|
||
<p>
|
||
文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
</div>
|
||
</el-card>
|
||
</template>
|