最近在進行人臉識別的項目，是利用spring cloud框架及基礎進行開發(fā)的，開始真的是一頭霧水，什么都不懂，網上的資料很多，但是很多感覺大家都不是很認真的就拿出來寫上，搞得自己很煩。我想把自己學習到的東西記錄一下，順便幫助大家學習一點知識。目前就記錄一下自己在項目中學習到的新知識，不敢把源碼亮出來，因為這畢竟是一個項目，多多體諒，但是盡量能讓大家用起來。希望大佬們可以指教我，我這個人特別虛心接收指教，就怕學不夠，嘿嘿。
一、前端攝像頭拍照問題
PC端拍照，主要需要利用攝像頭，但是存在瀏覽器兼容的問題，之前參照H5拍照，發(fā)現我的谷歌瀏覽器不能出現攝像頭，后面找到一篇大佬的源碼程序大佬vue攝像頭拍照才發(fā)現，之前的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，進行使用
