H5人脸识别-利用video、canvas绘图

<video id="video" class="pic_video" playsinline autoplay x5-video-player-type="h5" style='object-fit:fill;width: 100%;height: 100%;' src=""></video>

<canvas id="canvas" class="canvas_pic" style='margin: 0;padding: 0;'></canvas>

// 头像照片

captureAvg() {

let vm = this;

let video = document.querySelector('video');

let canvas = document.querySelector('canvas'),

ctx = canvas.getContext('2d'),

CHeight = video.clientHeight, //获取屏幕大小让canvas自适应

CWidth = video.clientWidth;

canvas.width = '1080';     //  canvas.width = CWidth

canvas.height = '1080';    //  canvas.height = CHeight

if (vm.localMediaStream) {

ctx.drawImage(video, 0, 0);

// console.log(ctx.drawImage(video, 0, 0, CWidth, CHeight))

var dataURL = canvas.toDataURL('image/jpeg'); //dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA'

vm.imginfo = dataURL.slice(23);

vm.imginfoo = dataURL;

// console.log(vm.imginfo)

// console.log(vm.imginfoo)

}

}

1、利用video调取浏览器摄像头进行拍照;

2、再通过canvas绘图减小图片大小;

3、后上传用户信息和人脸照片进行百度活体检测和实名认证;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容