Vue人臉識別登陸
阿新 • • 發佈:2020-07-31
專案需求做登陸頁面,先是准考證號,然後人臉識別驗證匹配登陸!
因為要判斷有沒有人臉,沒有人臉的話就不會拍照對比,所以這裡主要用到的是tracking.js,在組建中引入tracking.js和face-min.js(當然也可以npm安裝)
/* *template */ <el-button type="primary" :loading="forming" @click="formTable">確認</el-button>//准考證號確認按鈕,點選後開始呼叫攝像頭 <video width="375" height="290" autoplay playsinline ref="video" id="video" v-show="true"></video> <canvas id="canvas" width="500" height="400" class="canvas" v-show="false"></canvas>
/* *script */ export default{ data(){ return{ submitBase:""//儲存拍到的base64照片,作為介面引數 videoEle: null, trackerTask: null, mediaStreamTrack: null } }, methods:{ formTable(){ //flag是一個開關,不然tracking.js會不斷的拍照 let flag = true; let tracker = new window.tracking.ObjectTracker("face"); tracker.setStepSize(2); //轉頭角度影響識別率 tracker.setEdgesDensity(0, 13); tracker.setInitialScale(5); this.trackerTask = window.tracking.track("video", tracker, { camera: true }); tracker.on("track", event => { if (event.data.length) { //有頭像有頭像執行 //會一直拍照,所有這裡加個鎖 if (flag) { let vm = this; let video = document.querySelector("video"); let canvas1 = document.querySelector("canvas"); let context1 = canvas1.getContext("2d"); canvas1.setAttribute("width", video.videoWidth); canvas1.setAttribute("height", video.videoHeight); flag = false; let image = context1.drawImage( video, 0, 0, video.videoWidth, video.videoHeight ); let getBase = canvas1.toDataURL("image/png", 1); //1表示質量(無失真壓縮) this.submitBase = getBase; //下面就是axios呼叫介面了 } } }