Vben
authored
|
1
|
<template>
|
Vben
authored
|
2
3
|
<PageWrapper title="图片裁剪示例" content="需要开启测试接口服务才能进行上传测试!">
<CollapseContainer title="头像裁剪">
|
Vben
authored
|
4
|
<CropperAvatar :uploadApi="uploadApi" />
|
Vben
authored
|
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
</CollapseContainer>
<CollapseContainer title="矩形裁剪" class="my-4">
<div class="container p-4">
<div class="cropper-container mr-10">
<CropperImage ref="refCropper" :src="img" @cropend="handleCropend" style="width: 40vw" />
</div>
<img :src="cropperImg" class="croppered" v-if="cropperImg" />
</div>
<p v-if="cropperImg">裁剪后图片信息:{{ info }}</p>
</CollapseContainer>
<CollapseContainer title="圆形裁剪">
<div class="container p-4">
<div class="cropper-container mr-10">
<CropperImage
ref="refCropper"
:src="img"
@cropend="handleCircleCropend"
style="width: 40vw"
circled
/>
</div>
<img :src="circleImg" class="croppered" v-if="circleImg" />
|
|
29
|
</div>
|
Vben
authored
|
30
31
|
<p v-if="circleImg">裁剪后图片信息:{{ circleInfo }}</p>
</CollapseContainer>
|
Vben
authored
|
32
33
34
|
</PageWrapper>
</template>
<script lang="ts">
|
Vben
authored
|
35
|
import { defineComponent, ref } from 'vue';
|
Vben
authored
|
36
|
import { PageWrapper } from '/@/components/Page';
|
Vben
authored
|
37
38
39
|
import { CollapseContainer } from '/@/components/Container/index';
import { CropperImage, CropperAvatar } from '/@/components/Cropper';
import { uploadApi } from '/@/api/sys/upload';
|
Vben
authored
|
40
|
import img from '/@/assets/images/header.jpg';
|
|
41
|
|
Vben
authored
|
42
43
44
45
|
export default defineComponent({
components: {
PageWrapper,
CropperImage,
|
Vben
authored
|
46
47
|
CollapseContainer,
CropperAvatar,
|
Vben
authored
|
48
49
|
},
setup() {
|
Vben
authored
|
50
51
52
53
|
const info = ref('');
const cropperImg = ref('');
const circleInfo = ref('');
const circleImg = ref('');
|
|
54
|
|
Vben
authored
|
55
|
function handleCropend({ imgBase64, imgInfo }) {
|
Vben
authored
|
56
57
58
|
info.value = imgInfo;
cropperImg.value = imgBase64;
}
|
|
59
|
|
Vben
authored
|
60
61
62
63
64
|
function handleCircleCropend({ imgBase64, imgInfo }) {
circleInfo.value = imgInfo;
circleImg.value = imgBase64;
}
|
|
65
66
67
|
return {
img,
info,
|
Vben
authored
|
68
|
circleInfo,
|
|
69
|
cropperImg,
|
Vben
authored
|
70
71
72
73
|
circleImg,
handleCropend,
handleCircleCropend,
uploadApi,
|
|
74
|
};
|
Vben
authored
|
75
76
77
|
},
});
</script>
|
|
78
79
|
<style scoped>
|
|
80
|
.container {
|
Vben
authored
|
81
|
display: flex;
|
|
82
|
width: 100vw;
|
Vben
authored
|
83
84
85
|
align-items: center;
}
|
|
86
87
88
89
|
.cropper-container {
width: 40vw;
}
|
Vben
authored
|
90
|
.croppered {
|
|
91
92
93
94
95
|
height: 360px;
}
p {
margin: 10px;
|
Vben
authored
|
96
|
}
|
|
97
|
</style>
|