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