最近在进行人脸识别的项目，是利用spring cloud框架及基础进行开发的，开始真的是一头雾水，什么都不懂，网上的资料很多，但是很多感觉大家都不是很认真的就拿出来写上，搞得自己很烦。我想把自己学习到的东西记录一下，顺便帮助大家学习一点知识。目前就记录一下自己在项目中学习到的新知识，不敢把源码亮出来，因为这毕竟是一个项目，多多体谅，但是尽量能让大家用起来。希望大佬们可以指教我，我这个人特别虚心接收指教，就怕学不够，嘿嘿。
一、前端摄像头拍照问题
PC端拍照，主要需要利用摄像头，但是存在浏览器兼容的问题，之前参照H5拍照，发现我的谷歌浏览器不能出现摄像头，后面找到一篇大佬的源码程序大佬vue摄像头拍照才发现，之前的H5拍照的一个函数已经过时了，根本不行，根据大佬的源程序，我进行改造。贴出源码，希望大家能用到。
1.在<template>里面
<div style="margin-left: 50px;width: 85%">
<p style="margin-bottom: 2px">请拍摄1张自拍图像
<div class="takePhotostyle" id="takeindex">
<i class="el-icon-plus" @click="handleChange">
<div id="imgindex" >
<img v-if="imageUrl" :src="imageshow" class="avatar" >
<el-dialog title="拍摄图像" :visible.sync="visibleCamera" placement="bottom" trigger="click" ref="dialog" width="45%">
<div style="display: flex; width: 970px">
<div class="cameraBox">
<div style="text-align: center;font-size: 14px;font-weight: bold;margin-bottom: 10px;">摄像头
<video id="video" width="550" height="440" style="border: 1px solid #ccc" ref="myvedio">
<div class="iCenter" style="margin-top: 20px">
<el-Button type='primary' long size='large' @click="takePhone" style='width: 200px;'>
拍照
<div style="text-align: center;font-size: 14px;font-weight: bold;margin-bottom: 10px;">
拍摄效果
<canvas id='canvas' width='350' height='440' style="display: block;border: 1px solid #ccc"
ref="mycanvas">
<div class="iCenter" style="margin-top: 20px">
<el-Button type='primary' long size='large' @click="takePhoneUpfile"
style='width: 200px;' v-if="preViewVisible" >保存
</div>
</template>
2.<script>里面
data(){
return {
isMultiple:true,
formDate:'',
imageUrl:false,
show:true,
visibleCamera:false,
preViewVisible:false,
blobFile:null,
canvas:null,
video:null,
MediaStreamTrack:null,
memberInit: {}, //form标记
formface:{
input:'',
}
}
},
mounted() {
this.memberInit = Object.assign({}, this.form);
// 摄像头
this.canvas = document.getElementById('canvas');
this.video = document.getElementById('video');
//this.setHeaders() // 上传token
//this.handleCamera();
},
methods: {
handleChange() {
//console.log(this.$refs.dialog);
this.visibleCamera =true;
this.preViewVisible =false;
setTimeout(() => {
this.canvas =this.$refs.mycanvas;
this.video =this.$refs.myvedio;
//console.log(this.canvas);
this.canvas.getContext('2d').clearRect(0, 0, this.canvas.width, this.canvas.height);
let that =this;
if (navigator.getUserMedia || navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video:true,
//audio: true
}).then(function (stream) {
that.MediaStreamTrack =typeof stream.stop ==='function' ? stream : stream.getTracks()[1];
that.video.srcObject = stream;
that.video.play()
}).catch(function (err) {
console.log(err)
})
}else if (navigator.getMedia) {
navigator.getMedia({
video:true
}).then(function (stream) {
that.MediaStreamTrack = stream.getTracks()[1];
that.video.srcObject = stream;
that.video.play()
}).catch(function (err) {
console.log(err)
})
}else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia({
video:true
}).then(function (stream) {
that.MediaStreamTrack = stream.getTracks()[1];
that.video.srcObject = stream
that.video.play()
}).catch(function (err) {
console.log(err)
})
}else {
navigator.mozGetUserMedia({
video:true
}).then(function (stream) {
that.MediaStreamTrack = stream.getTracks()[1];
that.video.srcObject = stream;
that.video.play()
}).catch(function (err) {
console.log(err)
})
}
}, 0);
},
takePhone() {
let that =this
//console.log(that.canvas);
that.canvas.getContext('2d').drawImage(this.video, 140, 0, 350, 440, 0, 0, 350, 440)// context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
let dataurl = that.canvas.toDataURL('image/jpeg')
that.blobFile = that.dataURLtoFile(dataurl, 'camera.jpg')
that.preViewVisible =true
},
//保存图片
takePhoneUpfile() {
let that =this
// let formData = new FormData()
// formData.append('file', that.blobFile)
let type ='png';
that.canvas.getContext('2d').drawImage(this.video, 140, 0, 350, 440, 0, 0, 350, 440)// context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
let dataurl = that.canvas.toDataURL(type);
dataurl = dataurl.replace(this._fixType(type),'image/octet-stream');
console.log(dataurl);
//let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
that.imageshow = dataurl;
let divposition = document.getElementById('takeindex');
let imgposition = document.getElementById('imgindex');
divposition.style.margin ="0 150px 0 ";
imgposition.style.margin ="-148px 0 1px 0 ";
that.imageUrl =true;
that.visibleCamera=false;
//将图片放在上传的list中
// that.onSubmit(formData) // formdata方式上传图片
},
_fixType(type){
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
let r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
},
dataURLtoFile(dataurl, filename) {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[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, {type: mime})
},
3.style里面
.index{
width:85%;
height:auto;
margin-left:50px;
}
.centerbu{
text-align:center;
width:85%;
height:auto;
margin-top:20px;
}
.centerbu >.buttonnum{
width:60%;
margin-top:15px;
}
.el-dialog{
width:970px;
}
.takePhotostyle{
display:inline-block;
text-align:center;
cursor:pointer;
outline:0;
background-color:#fbfdff;
border:1px dashed #c0ccda;
border-radius:6px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:148px;
height:148px;
line-height:146px;
vertical-align:top;
}
.takePhotostyle i{
font-size:30px;
color:#8c939d;
font-style:normal;
font-weight:400;
font-family:element-icons!important;
}
.avatar{
width:148px;
height:148px;
line-height:146px;
}
基本上该程序能在各个浏览器运用，并且能够实现弹窗拍照。大家记得引入element-ui，进行使用
网友评论