github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/components/ImageCropping.vue (about)

     1  <script setup lang="ts">
     2  import { ContentWrap } from '@/components/ContentWrap'
     3  import { ImageCropping } from '@/components/ImageCropping'
     4  import { ref, unref } from 'vue'
     5  import { ElInput, ElDivider } from 'element-plus'
     6  
     7  const cropperExpose = ref<InstanceType<typeof ImageCropping>>()
     8  
     9  const base64 = ref('')
    10  
    11  const getBase64 = () => {
    12    base64.value = unref(cropperExpose)?.cropperExpose?.getCroppedCanvas()?.toDataURL() ?? ''
    13  }
    14  
    15  const cropperExpose2 = ref<InstanceType<typeof ImageCropping>>()
    16  
    17  const base642 = ref('')
    18  
    19  const getBase642 = () => {
    20    base642.value = unref(cropperExpose)?.cropperExpose?.getCroppedCanvas()?.toDataURL() ?? ''
    21  }
    22  </script>
    23  
    24  <template>
    25    <ContentWrap title="图片裁剪">
    26      <BaseButton type="primary" class="mb-20px" @click="getBase64">裁剪</BaseButton>
    27      <ElInput v-model="base64" class="mb-20px" type="textarea" />
    28      <ImageCropping
    29          ref="cropperExpose"
    30          image-url="https://hips.hearstapps.com/hmg-prod/images/%E5%AE%8B%E6%99%BA%E5%AD%9D-1597774015.jpg?crop=0.500xw:1.00xh;0.500xw,0&resize=640:*"
    31      />
    32      <ElDivider />
    33      <BaseButton type="primary" class="mb-20px" @click="getBase642">裁剪</BaseButton>
    34      <ElInput v-model="base642" class="mb-20px" type="textarea" />
    35      <ImageCropping
    36          ref="cropperExpose2"
    37          :show-actions="false"
    38          box-width="100%"
    39          :show-result="false"
    40          image-url="https://hips.hearstapps.com/hmg-prod/images/%E5%AE%8B%E6%99%BA%E5%AD%9D-1597774015.jpg?crop=0.500xw:1.00xh;0.500xw,0&resize=640:*"
    41      />
    42    </ContentWrap>
    43  </template>