用前端代码智能识别身份证的头像

 

function Check() {

            //画方框

            function draw(x, y, w, h) {

                var rect = document.createElement('div');//创建一个div

                document.querySelector('.Container').appendChild(rect);//querySelector返回文档中匹配指定 CSS 选择器的第一个元素 获取Container的元素

                //appendChild 使用此方法从一个元素向另一个元素移动元素

                rect.classList.add('rect');//classList.add 为 <div> 元素添加 class:

                rect.style.width = w + 'px';//style属性包含着元素的样式

                rect.style.height = h + 'px';

                rect.style.left = (IimgStudentPicture.offsetLeft + x) + 'px';//offsetLeft 、offsetTop相对于最近的祖先定位元素。

                rect.style.top = (IimgStudentPicture.offsetTop + y) + 'px';//方框长、宽以及x、y坐标

            };

 

            var IimgStudentPicture = document.getElementById('IimgStudentPicture'); //获取到图片

            var tracker = new tracking.ObjectTracker(['face']); //获取脸的数据（参数），它会返回一个数组

            //tracking.ObjectTracker()接受数组参数将你想要标记的对象分类（比如脸部整体、眼睛、鼻子、嘴巴等）。

            //tracker.setStepSize(1.7);规定用来标记的方框的大小。

            tracking.track('#IimgStudentPicture', tracker);//我们把要标记的对象和track事件进行绑定，一旦我们要标记的对象完成初始化，就会触发track事件。

            tracker.on('track', function (event) {

                if (event.data.length === 0) {//数据（Data）保存在对象数组列表中，其中的值是每一个标记对象的长、宽以及x、y坐标。

                    alert("无人脸")

                } else {

                    event.data.forEach(function (rect) {//forEach调用数组的每个元素，并将元素传递给回调函数。

                        console.log(rect)

                        draw(rect.x, rect.y, rect.width, rect.height);

                        //alert("有人脸")

                    });

                }

            });           

        };

 

var imgReaderI = new FileReader();//FileReader()接口：用于读取文件

        //图片文件 正则表达式过滤

        regexImageFilter = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg)$/i;

        //回调函数onLoad异步

        imgReaderI.onload = function (evt) {

            $("#IimgStudentPicture").attr('src', evt.target.result);//将数据结果赋值给image的src

        };

        $("#IStudentPicture").change(function () {

            var imgfFile = $("#IStudentPicture").prop('files')[0];//prop添加属性名称

            //加载image标签中

            if (!regexImageFilter.test(imgfFile.type)) {

                layer.msg('选择的不是一个有效的图片文件', { icon: 0 });

            }

            //readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。

            imgReaderI.readAsDataURL(imgfFile);

        });

 

        function Reload() {

                location.reload();

        }

 

点击检测效果图

需要用到的插件