|
|
- <!DOCTYPE html>
- <head>
-
- <link type="text/css" rel="stylesheet" href="jquery.toast.css">
- <style type="text/css">
- *, *:before, *:after {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- }
- .log-text {
- font-size: 14px;
- padding: 10px 0 0 10px;
- color: #666;
- text-align: center;
- margin-bottom: 30px;
- }
- .fprint-container {
- width: 300px;
- height: 252px;
- margin: 0 auto;
- position: relative;
- }
- .demo__fprint {
- width: 300px;
- height: 260px;
- overflow: visible;
- display: block;
- }
- .demo__fprint_bg {
- position: absolute;
- top: 0;
- left: 0;
- width: 297px;
- height: 260px;
- z-index: -1;
- background: url(./fprintBackground.svg) no-repeat;
- background-position: 78px -260px;
- background-size: auto;
- /* background-position: -100px 0; */
- /* background-size: cover; */
- }
- .demo__fprint_bg img{position: absolute;width: 147px;top: 50%;
- left: 75px;
- opacity: .9;
- transform: translateY(-50%);}
- .demo__fprint_bg.leave {
- opacity: 0.5;
- }
-
- .demo__fprint_bg.down {
- opacity: 1;
- }
-
- .demo__fprint-path {
- stroke-width: 2.5px;
- stroke-linecap: round;
- fill: none;
- stroke: white;
- visibility: hidden;
- transition: opacity 0.5s ease;
- will-change: stroke-dashoffset, stroke-dasharray;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
-
- .demo__fprint-path--pinkish {
- stroke: #a94a8c;
- }
- .demo__fprint-path--purplish {
- stroke: #8742cc;
- }
- .demo__fprint-path#demo__elastic-path {
- will-change: opacity;
- opacity: 1;
- }
- .demo__hidden-path {
- display: none;
- }
-
- .demo__ending-path {
- fill: none;
- stroke-width: 2.5px;
- stroke-dasharray: 60 1000;
- stroke-dashoffset: 61;
- stroke-linecap: round;
- will-change: stroke-dashoffset, stroke-dasharray, opacity;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- transition: stroke-dashoffset 1s ease, stroke-dasharray 0.5s linear, opacity 0.75s ease;
- }
-
- .demo__ending-path--pinkish {
- stroke: #a94a8c;
- }
- .demo__ending-path--purplish {
- stroke: #8742cc;
- }
- .buttons {
- width: 500px;
- display: flex;
- margin: auto;
- align-items: center;
- justify-content: center;
- }
- #enroll-btn {
- width: 140px;
- }
- </style>
-
- </head>
-
- <body>
- <div class="fprint-container">
- <div class="demo__fprint_bg leave"><img src="./fprintBackground.svg" alt=""></div>
- <svg class="demo__fprint" viewBox="0 0 180 320">
- <defs>
- <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
- <stop offset="0%" stop-color="#8742cc"></stop>
- <stop offset="100%" stop-color="#a94a8c"></stop>
- </linearGradient>
- </defs>
- <path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--pinkish" d="M46.1,214.3c0,0-4.7-15.6,4.1-33.3" style="stroke-dasharray: 34.235, 36.235; stroke-dashoffset: 35.235px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--purplish" d="M53.5,176.8c0,0,18.2-30.3,57.5-13.7" style="stroke-dasharray: 64.5064, 66.5064; stroke-dashoffset: 65.5064px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--pinkish" d="M115.8,166.5c0,0,19.1,8.7,19.6,38.4" style="stroke-dasharray: 45.1842, 47.1842; stroke-dashoffset: 46.1842px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--pinkish" d="M47.3,221c0,0,3.1-2.1,4.1-4.6s-5.7-20.2,7-36.7c8.5-11,22.2-19,37.9-15.3" style="stroke-dasharray: 88.0272, 90.0272; stroke-dashoffset: 89.0272px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--pinkish" d="M102.2,165.4c10.2,2.7,19.5,10.4,23.5,20.2c6.2,15.2,4.9,27.1,4.1,39.4" style="stroke-dasharray: 72.1106, 74.1106; stroke-dashoffset: 73.1106px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--purplish" d="M51.1,226.5c3.3-2.7,5.1-6.3,5.7-10.5c0.5-4-0.3-7.7-0.3-11.7" style="stroke-dasharray: 23.9625, 25.9625; stroke-dashoffset: 24.9625px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--purplish" d="M56.3,197.9c3.1-16.8,17.6-29.9,35.1-28.8c17.7,1.1,30.9,14.9,32.8,32.2" style="stroke-dasharray: 99.6723, 101.672; stroke-dashoffset: 100.672px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--purplish" d="M124.2,207.9c0.5,9.3,0.5,18.7-2.1,27.7" style="stroke-dasharray: 27.9142, 29.9142; stroke-dashoffset: 28.9142px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--pinkish" d="M54.2,231.1c2.1-2.6,4.6-5.1,6.3-8c4.2-6.8,0.9-14.8,1.5-22.3c0.5-7.1,3.4-16.3,10.4-19.7" style="stroke-dasharray: 56.1771, 58.1771; stroke-dashoffset: 57.1771px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--purplish" d="M77.9,178.2c9.3-5.1,22.9-4.7,30.5,3.3" style="stroke-dasharray: 32.824, 34.824; stroke-dashoffset: 33.824px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--purplish" d="M113,186.5c0,0,13.6,18.9,1,54.8" style="stroke-dasharray: 56.5353, 58.5353; stroke-dashoffset: 57.5353px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--pinkish" d="M57.3,235.2c0,0,5.7-3.8,9-12.3" style="stroke-dasharray: 15.4365, 17.4365; stroke-dashoffset: 16.4365px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--pinkish" d="M111.7,231.5c0,0-4.1,11.5-5.7,13.6" style="stroke-dasharray: 14.7687, 16.7687; stroke-dashoffset: 15.7687px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--purplish" d="M61.8,239.4c9.3-8.4,12.7-19.7,11.8-31.9c-0.9-12.7,3.8-20.6,18.5-21.2" style="stroke-dasharray: 67.9598, 69.9598; stroke-dashoffset: 68.9598px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--pinkish" d="M97.3,188.1c8.4,2.7,11,13,11.3,20.8c0.4,11.8-2.5,23.7-7.9,34.1c-0.1,0.1-0.1,0.2-0.2,0.3
- c-0.4,0.8-0.8,1.5-1.2,2.3c-0.5,0.8-1,1.7-1.5,2.5" style="stroke-dasharray: 66.4444, 68.4444; stroke-dashoffset: 67.4444px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--purplish" d="M66.2,242.5c0,0,15.3-11.1,13.6-34.9" style="stroke-dasharray: 38.917, 40.917; stroke-dashoffset: 39.917px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--pinkish" d="M78.7,202.5c1.5-4.6,3.8-9.4,8.9-10.6c13.5-3.2,15.7,13.3,14.6,22.1" style="stroke-dasharray: 46.1932, 48.1932; stroke-dashoffset: 47.1932px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--pinkish" d="M102.2,219.7c0,0-1.7,15.6-10.5,28.4" style="stroke-dasharray: 30.5375, 32.5375; stroke-dashoffset: 31.5375px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-backwards demo__fprint-path--pinkish" d="M72,244.9c0,0,8.8-9.9,9.9-15.7" style="stroke-dasharray: 18.7134, 20.7134; stroke-dashoffset: 19.7134px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--pinkish" d="M84.5,223c0.3-2.6,0.5-5.2,0.7-7.8c0.1-2.1,0.2-4.6-0.1-6.8c-0.3-2.2-1.1-4.3-0.9-6.5c0.5-4.4,7.2-6.9,10.1-3.1
- c1.7,2.2,1.7,5.3,1.9,7.9c0.4,3.8,0.3,7.6,0,11.4c-1,10.8-5.4,21-11.5,29.9" style="stroke-dasharray: 86.4028, 88.4028; stroke-dashoffset: 87.4028px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--removes-forwards demo__fprint-path--purplish" d="M90,201.2c0,0,4.6,28.1-11.4,45.2" style="stroke-dasharray: 48.0853, 50.0853; stroke-dashoffset: 49.0853px; visibility: visible;"></path>
- <path class="demo__fprint-path demo__fprint-path--pinkish" id="demo__elastic-path" d="M67.3,219C65,188.1,78,180.1,92.7,180.3c18.3,2,23.7,18.3,20,46.7" style="stroke-dasharray: 111.304, 113.304; stroke-dashoffset: 112.304px; visibility: visible;"></path>
- <!-- <line id="demo__straight-path" x1="0" y1="151.3" x2="180" y2="151.3"></line>
- <path class="demo__hidden-path" id="demo__arc-to-top" d="M0,148.4c62.3-13.5,122.3-13.5,180,0"></path>
- <path class="demo__hidden-path" id="demo__curve" d="M0,140.2c13.1-10.5,34.7-17,48.5-4.1c5.5,5.2,7.6,12.1,9.2,19.2c2.4,10.5,4.3,21,7.2,31.4c2.4,8.6,4.3,19.6,10.4,26.7c4.3,5,17.7,13.4,23.1,4.8c5.9-9.4,6.8-22.5,9.7-33c4.9-17.8,13-14.6,15.7-14.6c1.8,0,9,2.3,15.4,5.4c6.2,3,11.9,7.7,17.9,11.2c7,4.1,16.5,9.2,22.8,6.6"></path>
- <path class="demo__ending-path demo__ending-path--pinkish" d="M48.4,220c-5.8,4.2-6.9,11.5-7.6,18.1c-0.8,6.7-0.9,14.9-9.9,12.4c-9.1-2.5-14.7-5.4-19.9-13.4c-3.4-5.2-0.4-12.3,2.3-17.2c3.2-5.9,6.8-13,14.5-11.6c3.5,0.6,7.7,3.4,4.5,7.1"></path>
- <path class="demo__ending-path demo__ending-path--pinkish" d="M57.3,235.2c-14.4,9.4-10.3,19.4-17.8,21.1c-5.5,1.3-8.4-7.8-13.8-4.2c-2.6,1.7-5.7,7.7-4.6,10.9c0.7,2,4.1,2,5.8,2.4c3,0.7,8.4,3,7.6,7.2c-0.6,3-5,5.3-2.4,8.7c1.8,2.2,4.7,1.1,6.9,0.3c11.7-4.3,14.5,0.8,16.5,0.9"></path>
- <path class="demo__ending-path demo__ending-path--purplish" d="M79,246c-1.8,2.4-4.9,2.9-7.6,3.2c-2.7,0.3-5.8-0.8-7.7,1.6c-2.9,3.3,0.7,8.2-1.2,12c-1.5,2.8-4.5,2.4-6.9,1.3c-10.1-4.7-33.2-17.5-38.1-2.5c-1.1,3.4-1.9,7.5-1.3,11c0.6,4,5.6,7.9,7.7,2.3c0.8-2.1,3.1-8.6-1-8.9"></path>
- <path class="demo__ending-path demo__ending-path--pinkish" d="M91.8,248c0,0-3.9,6.4-6.2,9.2c-3.8,4.5-7.9,8.9-11.2,13.8c-1.9,2.8-4.4,6.4-3.7,10c0.9,5.2,4.7,12.5,9.7,14.7c5.2,2.2,15.9-4.7,13.1-10.8c-1.4-3-6.3-7.9-10-7.2c-1,0.2-1.8,1-2,2"></path>
- <path class="demo__ending-path demo__ending-path--purplish" d="M114.8,239.4c-2.7,6.1-8.3,12.8-7.8,19.8c0.3,4.6,3.8,7.4,7.8,9.1c8.9,3.8,19.7,0.4,28.6-1.3c8.8-1.7,19.7-3.2,23.7,6.7c2.8,6.8,6.1,14.7,4.4,22.2"></path>
- <path class="demo__ending-path demo__ending-path--pinkish" d="M129.9,224.2c-0.4,7.5-3.1,18,0.7,25c2.8,5.1,14.3,6.3,19.5,7.4c3.7,0.7,8.7,2.2,12-0.5c6.7-5.4,11.1-13.7,14.1-21.6c3.1-8-4.4-12.8-11.1-14.5c-5-1.3-19.1-0.7-21-6.7c-0.9-2.8,1.8-5.9,3.4-7.9"></path>
- <path class="demo__under-curve" d="M0,140.2c13.1-10.5,34.7-17,48.5-4.1c5.5,5.2,7.6,12.1,9.2,19.2c2.4,10.5,4.3,21,7.2,31.4c2.4,8.6,4.3,19.6,10.4,26.7c4.3,5,17.7,13.4,23.1,4.8c5.9-9.4,6.8-22.5,9.7-33c4.9-17.8,13-14.6,15.7-14.6c1.8,0,9,2.3,15.4,5.4c6.2,3,11.9,7.7,17.9,11.2c7,4.1,16.5,9.2,23.8,6.6l0,125.5l-181,0l0,-179.8"></path> -->
- </svg>
- </div>
-
- <div class="log-text">loading...</div>
-
-
- <div class="buttons">
- <button id="enroll-btn">GX1000采集指纹</button>
- </div>
- <audio src="./press.mp3" id="press"></audio>
- <audio src="./up.mp3" id="up"></audio>
- <script src='jquery.min.js'></script>
- <script src='jquery.toast.min.js'></script>
- <script src='index.js'></script>
- <script src='mafp_sdk.js'></script>
- <script type="text/javascript">
-
-
-
- function log(msg) {
- document.querySelector(".log-text").innerHTML = msg;
- }
-
-
- onload = function() {
-
- const EnrollCount = 6;
- const EnrollTimeout = 30 * 1000;
-
- setFprintProgress(0);
-
- log("初始化...");
- mafp.init({
- enrollCount: EnrollCount,
- enrollTimeout: EnrollTimeout
- }).then(() => {
- log("初始化成功.");
- }).catch(e => {
- log("初始化失败.");
- });
- var up = document.getElementById("up");
- var press = document.getElementById("press");
- $("#enroll-btn").click(() => {
- if (mafp.isWorking) {
- mafp.cancelEnroll();
- $("#enroll-btn").text("注册");
- log("注册取消");
- }else {
- log("注册准备中...");
-
- mafp.startEnroll((status) => {
- // console.log(status)
- if (status.err) {
- let logText = "注册出错";
- switch(status.err) {
- case ErrorReceiveDataErr:
- logText = "数据包传输错误";
- break;
- case ErrorEnrollTimeout:
- logText = "注册超时";
- break;
- case ErrorDeviceNotFound:
- logText = "设备未找到";
- break;
- case ErrorEmptyFail:
- logText = "清空数据失败";
- break;
- default:
- logText = "注册出错：" + status.err;
- }
- log(logText);
- $.toast({text: logText, position: 'top-center', icon: "error", hideAfter: 5000})
-
- $("#enroll-btn").text("注册");
- return;
- }else {
- if(status.state == STATE_WAIT_FINGER_DOWN) {
- up.pause()
- press.play()
- log("请按手指");
- }
- else if(status.state == STATE_WAIT_FINGER_LEAVE) {
- up.play()
- log("请抬起手指");
- }
- else if(status.state == STATE_EXTRACT_TEMPLATE) {
- log("提取特征点...");
- }
- else if(status.state == STATE_DOWNLOAD_TEMPLATE) {
- log("模板传输中...");
- }
- else if (status.state == STATE_FINGER_DOWN) {
- $(".demo__fprint_bg").addClass("down");
- }else if (status.state == STATE_FINGER_LEAVE) {
- $(".demo__fprint_bg").removeClass("down");
- }else if (status.state >= STATE_EXTRACT_TEMPLATE_FAIL) {
- let errText = "提取特征点失败";
- if (status.state == STATE_EXTRACT_TEMPLATE_DIRTY) {
- errText = "提取特征点失败, 指纹图像太乱";
- }else if (status.state == STATE_EXTRACT_TEMPLATE_POINTS_FEW) {
- errText = "提取特征点失败, 特征点太少";
- }else if (status.state == STATE_EXTRACT_TEMPLATE_DIRTY) {
- errText = "提取特征点失败, 合并失败";
- }
- $.toast({text: errText, position: 'top-center', hideAfter: 5000})
-
- }
- }
-
- if (status.data) {
- //注册完成 模板数据 二进制数据
- //可封装成 multipart/form-data 上传服务端
- console.log(status.data,'指纹数据')
- var templateData = new Uint8Array(status.data);
- localStorage.setItem('fingerprint',status.data)
- // console.log(status.data);
- log("注册完成");
- $("#enroll-btn").text("注册");
- }
-
- if (status.data || status.step == EnrollCount && (status.state == 5 || status.state == 6)) {
- setFprintProgress(1);
- }else {
- setFprintProgress((status.step - 1) / EnrollCount);
- }
-
- });
- $("#enroll-btn").text("取消");
- }
-
- })
- }
- </script>
- </body>
|
