navigator.mediaDevices.getUserMedia({video: true}).then(success => {
// 摄像头开启成功
this.$refs.takeA.$refs['video'].srcObject = success
// 实时拍照效果
this.$refs.takeA.$refs['video'].play()
}).catch(error => {
this.popup = false
this.$message({showClose: true,duration:3000,message:'摄像头开启失败,请检查摄像头是否可用!',type: 'error'});
})
<video ref="video" width="640" height="450" autoplay></video> //Html
<el-button size="mini" type="primary" @click="photograph">拍摄</el-button>
<el-button size="mini" type="primary" @click="Savethelocal">保存本地</el-button>
// 拍照
photograph () {
let ctx = this.$refs['canvas'].getContext('2d')
// 把当前视频帧内容渲染到canvas上
ctx.drawImage(this.$refs['video'], 0, 0, 640, 480)
// 转base64格式、图片格式转换、图片质量压缩
let imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg', 0.7)
如需上传图篇 可以吧base64转换文件流 进行上传
let a = this.base64toFile(imgBase64)
this.img_base = this.blobToFile(a)
// 由字节转换为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)
},
// 保存到本地
Savethelocal(){
html2canvas(document.getElementById("imageWrapper")).then(canvas => {
let saveUrl = canvas.toDataURL('image/png')
let blob = this.base64ToBlob(saveUrl)
let evt = document.createEvent('HTMLEvents')
evt.initEvent('click', true, true)
let aLink = document.createElement('a')
aLink.download = new Date().getTime() + '.jpeg'
aLink.href = URL.createObjectURL(blob)
aLink.click()
if (aLink.href) {
this.$message({showClose: true,duration:3000,message:'保存成功',type: 'error'});
}
})
},
//base64转File
base64toFile (dataurl, filename = 'file') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
// return new File([u8arr], `${filename}.${suffix}`, {
// type: mime
// }) 转File流
// return new Blob([u8arr], { type: mime }); 转Blob流
},
//Blob流转File
blobToFile (theBlob, fileName = 'ocr1.jpeg') {
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
},
纵享丝滑
网友评论