Blame view

src/views/demo/comp/cropper/index.vue 1.66 KB
1
2
<template>
  <PageWrapper title="图片裁剪示例" contentBackground>
3
4
5
6
7
8
9
10
11
    <div class="container">
      <div class="cropper-container">
        <CropperImage
          ref="refCropper"
          src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg"
          @cropperedInfo="cropperedInfo"
          style="width: 40vw"
        />
      </div>
12
13
14
15
      <a-button type="primary" @click="onCropper"> 裁剪 </a-button>
      <img :src="cropperImg" class="croppered" v-if="cropperImg" />
    </div>
    <p v-if="cropperImg">裁剪后图片信息:{{ info }}</p>
16
17
18
  </PageWrapper>
</template>
<script lang="ts">
19
  import { defineComponent, ref, unref } from 'vue';
20
21
22
  import { PageWrapper } from '/@/components/Page';
  import { CropperImage } from '/@/components/Cropper';
  import img from '/@/assets/images/header.jpg';
23
24
  import { templateRef } from '@vueuse/core';
25
26
27
28
29
30
  export default defineComponent({
    components: {
      PageWrapper,
      CropperImage,
    },
    setup() {
31
32
      let info = ref('');
      let cropperImg = ref('');
33
      const refCropper = templateRef<HTMLElement | null>('refCropper', null);
34
35

      const onCropper = (): void => {
36
        unref(refCropper).croppered();
37
      };
38
39
40
41
42
      function cropperedInfo({ imgBase64, imgInfo }) {
        info.value = imgInfo;
        cropperImg.value = imgBase64;
      }
43
44
45
46
47
48

      return {
        img,
        info,
        cropperImg,
        onCropper,
49
        cropperedInfo,
50
      };
51
52
53
    },
  });
</script>
54
55

<style scoped>
56
  .container {
57
    display: flex;
58
    width: 100vw;
59
60
61
    align-items: center;
  }
62
63
64
65
  .cropper-container {
    width: 40vw;
  }
66
  .croppered {
67
68
69
70
71
    height: 360px;
  }

  p {
    margin: 10px;
72
  }
73
</style>