<template>
<div>
<!--canvas截取流-->
<canvas ref="canvas" width="320" height="260"></canvas>
<!--圖片展示-->
<video ref="video" width="340" height="280" autoplay></video>
<!--確認-->
<el-button size="mini" type="primary" @click="photograph">拍照</el-button>
</div>
</template>
<script>
export default {
created() {
this.callCamera()
},
data() {
return {
// headImgSrc: require('../assets/image/shou.png')
}
},
methods: {
// 調用攝像頭
callCamera() {
// H5調用電腦攝像頭API
navigator.mediaDevices
.getUserMedia({
video: true
})
.then(success => {
// 攝像頭開啟成功
this.$refs['video'].srcObject = success
// 實時拍照效果
this.$refs['video'].play()
})
.catch(error => {
console.error('攝像頭開啟失敗，請檢查攝像頭是否可用！')
})
},
// 拍照
photograph() {
let ctx = this.$refs['canvas'].getContext('2d')
// 把當前視頻幀內容渲染到canvas上
ctx.drawImage(this.$refs['video'], 0, 0, 340, 280)
// 轉base64格式、圖片格式轉換、圖片質量壓縮
let imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg', 0.7) // 由字節轉換為KB 判斷大小
let str = imgBase64.replace('data:image/jpeg;base64,', '')
let strLength = str.length
let fileLength = parseInt(strLength - (strLength / 8) * 2) // 圖片尺寸 用於判斷
let size = (fileLength / 1024).toFixed(2)
console.log(size) // 上傳拍照信息 調用接口上傳圖片 .........
// 保存到本地
// let ADOM = document.createElement('a')
// ADOM.href = this.headImgSrc
// ADOM.download = new Date().getTime() + '.jpeg'
// ADOM.click()
},
// 關閉攝像頭
closeCamera() {
if (!this.$refs['video'].srcObject) return
let stream = this.$refs['video'].srcObject
let tracks = stream.getTracks()
tracks.forEach(track => {
track.stop()
})
this.$refs['video'].srcObject = null
}
}
}
</script>