功能

通过摄像头拍照或者直接上传获取文件数据，支持裁剪，依赖 cropper

WARNING

网页需要 https 模式才能调用摄像头

拍照图片与视口大小不一致的问题，需要等到 useUserMedia 更新参数，v10版本

参考

• https://github.com/vueuse/vueuse/pull/2032
• https://github.com/vueuse/vueuse/issues/2193

功能示例

展示区
获取的图片
本地Blob地址
参数：类型
uploadcamera
参数：裁剪
是否

最小示例

<template>
    <Wrapper>
        <ElButton @click="handleClick">打开</ElButton>
        <HDialogCameraUpload
            v-model:visible="visible"
            :http-request="httpRequest"
        />
    </Wrapper>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import Wrapper from '@/components/simple-wrapper.vue'
import HDialogCameraUpload from '../index.vue'

const result = ref('')
const visible = ref(false)

const handleClick = () => {
    visible.value = true
}

const httpRequest = (file: File, localUrl: string) => {
    result.value = localUrl
}
</script>

API

参数

事件