<template><el-dialog:visible="modalVisible"width="681px"custom-class="compaines-dialog"title="Complete Registration"class="face-dialog"v-dialogDrag:close-on-click-modal="false"@close="close":append-to-body="true"><div class="face" v-loading="faceloading"><p class="big-title">Liveness detection</p><!-- <p v-if="steps === 'open' || steps === 'screen'">Please place your face into the outlined area,we will take the photoautomatically!</p> --><p v-if="steps === 'open' || steps === 'screen'">{{ faceTips[imgList.length] }}</p><divv-if="steps === 'screen' && imgList.length > 0"style="text-align: center; font-size: 30px"><svg-icon :iconClass="faceLocation[imgList.length]" /></div><p v-if="steps === 'end'"><span v-if="faceOk" class="success">Successful!</span><span v-else class="fail">Failed!</span></p><div class="video-container" v-show="steps !== 'end'"><videoid="video"preloadautoplayloopmutedwidth="295"height="345":style="reverse ? 'transform:rotateY(180deg);' : ''"></video><canvas id="canvas" width="295" height="345"></canvas><canvasid="shortCut"width="295"height="345"style="opacity: 0"></canvas><canvasid="canvas1"width="295"height="345"style="opacity: 0"></canvas><i @click="reverseVideo" v-show="steps === 'screen'"><svg-icon iconClass="icon-camera" class="icon-camera" /></i></div><div v-show="steps === 'end'" style="text-align: center"><img v-if="faceOk" src="@/icons/img/face-success.png" alt="" /><img v-else src="@/icons/img/face-fail.png" alt="" /></div><div class="btns"><div class="add-num w300" @click="start" v-if="steps === 'open'">TURN CAMERA ON</div><divclass="retake-btn w300"style="margin-right: 0"@click="close"v-if="steps === 'screen'">TURN CAMERA OFF</div><divclass="retake-btn w300"@click="tryAgain"v-if="steps === 'end' && !faceOk">TRY AGAIN</div><divclass="add-num w300"@click="finish"v-if="steps === 'end' && faceOk">FINISH</div><p class="tips" v-if="steps === 'screen'">(To complete the liveness detection your camera must remain on)</p></div><div class="imgs" v-show="false"><p>未保存图片</p><p>已保存图片</p><div id="img"></div></div></div></el-dialog>
</template>
<script>
import './tracking-min.js'
import './face-min.js'
import { livenessCheck } from '@modules/kyc/api/system/system'
import debounce from 'lodash/debounce'export default {name: 'testTracking',model: {prop: 'formData',event: 'input',},props: {modalVisible: {type: Boolean,default: false,},formData: {type: Object | String,},option: {type: String,default: '',},},data() {return {saveArray: {},imgView: false,timer: true,steps: 'open',imgList: [],faceTips: ['Please place your face into the outlined area,we will take the photo automatically!','Look to the left','Look to the right','Tilt your head up','Tilt your head down',],faceLocation: ['','arrow-left','arrow-right','arrow-up','arrow-down','',],faceloading: false,faceOk: false,startPhoto: false,reverse: true,}},created() {this.start = debounce(this.start, 500)},methods: {// 打开摄像头start() {window.navigator.mediaDevices.getUserMedia({video: true,}).then((stream) => {this.openVideo()}).catch((err) => {this.$message.error('Cannot capture user camera')})},openVideo() {let that = thisthis.steps = 'screen'this.startPhoto = truelet canvas = document.getElementById('canvas')let context = canvas.getContext('2d')let tracker = new tracking.ObjectTracker('face')tracker.setInitialScale(4)tracker.setStepSize(2)tracker.setEdgesDensity(0.1)this.trackerTask = tracking.track('#video', tracker, { camera: true })tracker.on('track', function (event) {context.clearRect(0, 0, canvas.width, canvas.height)event.data.forEach(function (rect) {if (that.reverse) {context.strokeRect(295 - rect.x - rect.width,rect.y,rect.width,rect.height)} else {context.strokeRect(rect.x, rect.y, rect.width, rect.height)}context.strokeStyle = '#fff'context.fillStyle = '#fff'that.saveArray.x = rect.xthat.saveArray.y = rect.ythat.saveArray.width = rect.widththat.saveArray.height = rect.height})})this.timer = truethis.setPhotoInterval()},setPhotoInterval() {const countFun = () => {setTimeout(() => {if (this.timer && this.startPhoto) {countFun()if (this.reverse) {if (this.saveArray.x < 150 &&this.saveArray.y < 150 &&this.saveArray.width > 150 &&this.saveArray.height > 150) {this.getPhoto()}} else {if (295 - this.saveArray.x - this.saveArray.width < 150 &&this.saveArray.y < 150 &&this.saveArray.width > 150 &&this.saveArray.height > 150) {this.getPhoto()}}}}, 1000)}countFun()},// 获取人像照片getPhoto() {try {let video = document.getElementById('video')let cut = document.getElementById('shortCut')let context2 = cut.getContext('2d')context2.drawImage(video, 0, 0, 295, 345)this.keepImg()} catch (error) {}},// 将canvas转化为图片convertCanvasToImage(canvas) {let image = new Image()image.src = canvas.toDataURL('image/png')return image},//将base64转换为文件，dataurl为base64字符串，filename为文件名(必须带后缀名，如.jpg,.png)dataURLtoFile(dataurl, filename) {let arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], filename, { type: mime })},// 保存图片keepImg() {//先保存完整的截图let cut = document.getElementById('shortCut')let context = cut.getContext('2d')//从完整截图里面，截取左侧294x345大小的图片，添加到canvas1里面let imgData = context.getImageData(0, 0, 294, 345)let canvas1 = document.getElementById('canvas1')let context1 = canvas1.getContext('2d')context1.putImageData(imgData, 0, 0)let img = document.getElementById('img')//把canvas1里面的294x345大小的图片保存let photoImg = document.createElement('img')photoImg.src = this.convertCanvasToImage(canvas1).srcimg.appendChild(photoImg)this.imgList.push(this.dataURLtoFile(this.convertCanvasToImage(canvas1).src,`person${this.imgList.length}.jpg`))this.timer = false//捕捉成功后停顿3秒，再捕捉下一张，捕捉5张后上传文件if (this.imgList.length === 5) {this.sendImages()} else {setTimeout(() => {this.timer = truethis.setPhotoInterval()}, 3000)}},sendImages() {let formData = new FormData()this.imgList.forEach((item) => {formData.append('files', item)})this.faceloading = trueformData.append('actionId', this.formData.id)livenessCheck(formData, { isUpload: true }).then((res) => {if (res.success) {this.faceOk = true} else {this.faceOk = false}this.faceloading = falsethis.steps = 'end'}).catch((err) => {this.openVideo()this.faceloading = falsethis.imgList = []})},tryAgain() {this.imgList = []this.openVideo()},finish() {this.closeFace()this.$emit('Liveness check success')this.$emit('close', 'success')},clearCanvas() {let c = document.getElementById('canvas')let c1 = document.getElementById('canvas1')let cxt = c.getContext('2d')let cxt1 = c1.getContext('2d')cxt.clearRect(0, 0, 581, 436)cxt1.clearRect(0, 0, 581, 436)},closeFace() {try {this.startPhoto = falsethis.timer = falsethis.imgList = []this.clearCanvas()// 关闭摄像头let video = document.getElementById('video')video.srcObject.getTracks()[0].stop()// 停止侦测this.trackerTask.stop()} catch (error) {}},close() {this.closeFace()if(this.faceOk){this.$emit('close', 'success')}else{this.$emit('close')}},reverseVideo() {this.reverse = !this.reverse},},watch: {},
}
</script>
<style lang="scss">
@import './face.scss';
</style>

<template><el-dialog:visible="modalVisible"width="681px"custom-class="compaines-dialog"title="Complete Registration"class="face-dialog"@close="close"><div class="face" v-loading="faceloading"><p class="big-title" v-if="steps !== 'save'">Take a profile picture</p><p class="big-title success" v-if="steps === 'save'">Complete!</p><p v-if="steps === 'open'">Please turn on your camera and center your face within the below guides.</p><p v-if="steps === 'take'">Position your face within the outlined area,click the button and the image will be saved as your profile picture!</p><p v-if="steps === 'save'">Happy with your picture? If not, you can take another one.</p><div class="video-container"><videoid="video"preloadautoplayloopmutedwidth="295"height="345":style="reverse ? 'transform:rotateY(180deg);' : ''"></video><canvas id="canvas" width="295" height="345"></canvas><canvas id="shortCut" v-show="false"></canvas><img :src="imgSrc" alt="" v-show="steps === 'save'" /><i @click="reverseVideo" v-show="steps==='take'"><svg-icon iconClass="icon-camera" class="icon-camera" /></i></div><div class="btns"><div class="add-num w300" @click="start" v-if="steps === 'open'">TURN CAMERA ON</div><div class="add-num w300" @click="getPhoto" v-if="steps === 'take'">SAVE THE IMAGE</div><div class="retake-btn" @click="openVideo" v-if="steps === 'save'">RETAKE</div><div class="add-num" @click="keepImg" v-if="steps === 'save'">USE PICTURE</div><p class="tips" v-if="steps === 'take'">(To take a profile picture your camera must remain on)</p><div class="imgs" v-show="false"><canvasid="canvas1"width="295"height="345"v-show="steps === 'save'"></canvas><p>save images</p><div id="img"></div></div></div></div></el-dialog>
</template>
<script>
import './tracking-min.js'
import './face-min.js'
import { individualPhoto } from '@modules/kyc/api/system/system'
import debounce from 'lodash/debounce'
export default {name: 'testTracking',model: {prop: 'formData',event: 'input',},props: {modalVisible: {type: Boolean,default: false,},formData: {type: Object,},option: {type: String,default: '',},},data() {return {saveArray: {},imgView: false,timer: null,steps: 'open',imageFile: {},faceloading: false,btnLoading: false,imgSrc: '',reverse: true,}},created() {this.start = debounce(this.start, 500)},methods: {// 打开摄像头start() {window.navigator.mediaDevices.getUserMedia({video: true,}).then((stream) => {this.openVideo()}).catch((err) => {this.$message.error('Cannot capture user camera')})},openVideo() {let that = thisthis.steps = 'take'let saveArray = {}let canvas = document.getElementById('canvas')let context = canvas.getContext('2d')let tracker = new tracking.ObjectTracker('face')tracker.setInitialScale(4)tracker.setStepSize(1.5)tracker.setEdgesDensity(0.1)this.imgSrc = ''this.trackerTask = tracking.track('#video', tracker, { camera: true })tracker.on('track', function (event) {context.clearRect(0, 0, canvas.width, canvas.height)event.data.forEach(function (rect) {if (that.reverse) {context.strokeRect(295 - rect.x - rect.width,rect.y,rect.width,rect.height)} else {context.strokeRect(rect.x, rect.y, rect.width, rect.height)}context.strokeStyle = '#fff'context.fillStyle = '#fff'saveArray.x = rect.xsaveArray.y = rect.ysaveArray.width = rect.widthsaveArray.height = rect.height})})},// 获取人像照片getPhoto() {let video = document.getElementById('video')let can = document.getElementById('shortCut')can.width = video.videoWidthcan.height = video.videoHeightlet context2 = can.getContext('2d')if (this.reverse) {context2.scale(-1, 1)context2.translate(-video.videoWidth, 0)}context2.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)this.imgSrc = this.convertCanvasToImage(can).srcthis.steps = 'save'this.clearCanvas()// 停止侦测this.trackerTask.stop()// 关闭摄像头video.srcObject.getTracks()[0].stop()// this.imgView = true},// 截屏screenshot() {this.getPhoto()},// 将canvas转化为图片convertCanvasToImage(canvas) {let image = new Image()image.src = canvas.toDataURL('image/png')return image},//将base64转换为文件，dataurl为base64字符串，filename为文件名(必须带后缀名，如.jpg,.png)dataURLtoFile(dataurl, filename) {let arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], filename, { type: mime })},// 保存图片keepImg() {// let can = document.getElementById('shortCut')// let context = can.getContext('2d')// let imgData = context.getImageData(0, 0, 294, 345)// let canvas1 = document.getElementById('canvas1')// let context1 = canvas1.getContext('2d')// context1.putImageData(imgData, 0, 0)// let img = document.getElementById('img')// let photoImg = document.createElement('img')// photoImg.src = this.convertCanvasToImage(canvas1).src// img.appendChild(photoImg)// this.imageFile = this.dataURLtoFile(//   this.convertCanvasToImage(canvas1).src,//   'person.jpg'// )this.imageFile = this.dataURLtoFile(this.imgSrc, 'person.jpg')let formData = new FormData()formData.append('file', this.imageFile)this.faceloading = trueindividualPhoto(formData, { isUpload: true }).then((res) => {if (res.success) {this.faceloading = falsethis.closeFace()this.$emit('close', 'success')this.$store.dispatch('GetBusinessUser').then((res) => {}).catch((err) => {})} else {this.openVideo()this.faceloading = falsethis.imgList = []}}).catch((err) => {this.openVideo()this.faceloading = falsethis.imgList = []})},clearCanvas() {let c = document.getElementById('canvas')let c1 = document.getElementById('canvas1')let cxt = c.getContext('2d')let cxt1 = c1.getContext('2d')cxt.clearRect(0, 0, 581, 436)cxt1.clearRect(0, 0, 581, 436)},closeFace() {try {this.steps = 'open'this.clearCanvas()// 关闭摄像头let video = document.getElementById('video')video.srcObject.getTracks()[0].stop()// 停止侦测this.trackerTask.stop()} catch (error) {}},close() {this.closeFace()this.$emit('close')},reverseVideo() {this.reverse = !this.reverse},},watch: {faceView(v) {if (v == false) {this.closeFace()}},},destroyed() {// clearInterval(this.timer)},
}
</script>
<style lang="scss">
@import './face.scss';
</style>

.face {p {text-align: center;font-size: 16px;color: #333333;}.big-title {margin-top: 36PX;font-size: 24PX;font-weight: 600;color: #030229;text-align: center;}.success {color: #47BFAF;}.fail {color: #C81223;}.video-container {background: url(~@/icons/img/face.png);background-size: cover;position: relative;width: 295PX;height: 345PX;border-radius: 4%;overflow: hidden;margin: 0 auto;margin-top: 34PX;img,video,#canvas,#shortCut,#canvas1 {position: absolute;}img {width: 100%;height: 100%;object-fit: cover;}video{object-fit: cover;}.icon-camera{position: absolute;font-size: 32px;bottom: 20px;right: 20px;cursor: pointer;}}.btns {padding: 10PX;text-align: center;margin-top: 6PX;.tips {font-size: 14PX;color: #666;margin-top: 16PX;line-height: 24PX;}}.imgs {padding: 10PX;p {font-size: 16PX;}}.add-num {display: inline-block;font-size: 16PX;padding: 12PX 14PX;margin-right: 4PX;border-radius: 4PX;color: #ffffff;background: #47BFAF;cursor: pointer;}.retake-btn {width: 145PX;display: inline-block;font-size: 16PX;padding: 12PX 14PX;margin-right: 24PX;border-radius: 4PX;color: #828282;background: #E7E7E7;cursor: pointer;}.w300 {width: 300PX;}
}.face-dialog {.el-dialog__body {padding-top: 0;padding-bottom: 15px;}
}