vue - web 调用摄像头进行拍照
2021-07-15 •
3632浏览 •
代码 •
267字 •
List.vue
<template>
<!--人像采集-->
<div class="typt-list-container">
<div>人像采集</div>
<img v-if="image" :src="image" class="border" style="width: 200px;height: 200px;"/>
<el-button @click="openCamera">打开摄像头</el-button>
<el-dialog :visible.sync="cameraVisible"
class="passport-imgDialog"
:before-close="closeCamera"
width="800px"
:show-close="true"
style="padding: 0;"
title="人像采集"
:close-on-click-modal="false">
<div style="height: 400px;text-align: center;" v-if="cameraHack">
<Photograph :image="image"
:statusInfo="statusInfo"
@getPhoto="getPhoto"></Photograph>
</div>
</el-dialog>
</div>
</template>
<script>
import gateCamera from '../../../assets/acms/mixins/gateCamera/index.js'
import Photograph from '../../../components/acms/Photograph'
import { MsgShow } from '../../../assets/acms/js/Message'
export default {
components: {
Photograph
},
mixins: [gateCamera],
data () {
return {
cameraVisible: false,
cameraHack: false,
image: '', // 传递图像数据
statusInfo: { // 状态显示
status: '', // loading | fail
msg: ''
}
}
},
props: ['params', 'modifyData', 'pageData', 'searchData'],
mounted () {
},
methods: {
// 获取拍照图像
getPhoto ({ formdata, base64 }) {
MsgShow('success', '获取中......', 2000)
// 上传中
this.statusInfo.status = 'loading'
this.statusInfo.msg = '上传中'
// 上传成功
setTimeout(() => {
MsgShow('success', '人像采集成功', 2000)
this.statusInfo.status = ''
this.statusInfo.msg = ''
this.image = base64
this.closeCamera()
}, 2000)
},
// 打开摄像头
openCamera () {
this.cameraHack = false
this.cameraVisible = false
this.$nextTick(() => {
this.cameraHack = true
this.cameraVisible = true
})
},
// 关闭拍照弹窗
closeCamera () {
this.cameraHack = false
this.cameraVisible = false
}
}
}
</script>
翻 牌 子