<!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>