本文展示了如何使用Django框架结合百度AI的人脸识别技术进行用户注册和登录。用户上传图片，系统将图片转换为Base64编码，并通过百度AI接口进行人脸识别。注册时，系统还会发送短信验证码确保手机号未被注册。登录时，提供人脸登录和传统密码登录两种方式。
from django.shortcuts import render,redirect,reverse
from jyapp import models
from django.views import View
from django.http import HttpResponse,JsonResponse
图片base64
import base64
发送信息
import random
import urllib
import http.client
导入百度AI
from django.apps import AppConfig
from aip import AipFace
django内置事务
from django.db import transaction
百度AI基本信息
class AppConfig(AppConfig):
name = ‘jyapp’
APP_ID = ‘16538158’
API_KEY = ‘HZI4cNgG8BGwry0v2GgQPxjm’
SECRECT_KEY = ‘pcPY2QIuNnkS9gFDmjvH0SI7whlb2ml9’
client = AipFace(APP_ID,API_KEY,SECRECT_KEY)
client.setConnectionTimeoutInMillis(10005)
client.setSocketTimeoutInMillis(10005)
Create your views here.
首页
class Index(View):
def get(self,request):
return render(request,‘contact.html’)
注册
class Regist(View):
def get(self,request):
return render(request,‘moban_index.html’)
def post(self,request):
# 获取前端数据
imagecontent = request.POST.get(‘imagecontent’)
username = request.POST.get(‘username’)
mobile = request.POST.get(‘mobile’)
password = request.POST.get(‘password’)
if not all([imagecontent,username,mobile,password]):
return JsonResponse({‘code’:100,‘result’:‘注册信息不能为空’})
# if mobile_code != mobile_code_right:
# return JsonResponse({‘code’:111,‘result’:‘请输入正确的验证码’})
else:
# 验证该用户是否存在
user = models.User.objects.filter(mobile=mobile)
if user:
return JsonResponse({‘code’:123,‘result’:‘该用户已存在，请直接登录’})
else:
try:
# 引入事务
with transaction.atomic():
# 分割字符串
base_data = imagecontent.split(’,’)[1]
# base64解码
base64_decode = base64.b64decode(base_data)
# 图片写入本地
with open(‘static/image/’+mobile+’.jpeg’, ‘wb’) as f:
f.write(base64_decode)
# 添加到mysql数据库
models.User.objects.create(
imagecontent = ‘static/image/’+mobile+’.jpeg’,
username = username,
mobile = mobile,
password = password,
)
imageType = ‘BASE64’
groupId = ‘usergroup’
userId = mobile
# 加入可选参数
options = {}
options[‘user_info’] = username
options[‘quality_control’] = ‘NORMAL’
options[‘liveness_control’] = ‘LOW’
result = AppConfig.client.addUser(base_data,imageType,groupId,userId,options)
print(result)
error_code = result[‘error_code’]
if isinstance(error_code,int) and error_code == 0:
request.session[‘mobile’] = mobile
return JsonResponse({‘code’:200,‘result’:‘注册成功’})
# return JsonResponse({‘result’:‘注册成功’})
else:
error = ErrorCode().getErrorInfo(error_code)
return JsonResponse({‘result’:’{}’.format(error)})
except:
return JsonResponse({‘code’:333,‘result’:‘注册失败’})
# 发送验证码
class Send_message(View):
def get(self,request):
# 请求的路径
host = “106.ihuyi.com”
sms_send_uri = “/webservice/sms.php?method=Submit”
# 用户名是登录ihuyi.com账号名（例如：cf_demo123）
account = “C79537451”
# 密码 查看密码请登录用户中心->验证码、通知短信->帐户及签名设置->APIKEY
password = “3ee32fa1f3286fc182e04c723195158a”
mobile = request.GET.get(‘mobile’)
# 通过手机去查找用户是否已经注册
user = models.User.objects.filter(mobile=mobile)
if len(user) == 1:
return JsonResponse({‘msg’: “该手机已经注册”})
# 定义一个字符串,存储生成的6位数验证码
message_code = ‘’
for i in range(6):
i = random.randint(0, 9)
message_code += str(i)
# 拼接成发出的短信
text = “您的验证码是：” + message_code + “。请不要把验证码泄露给其他人。”
# 把请求参数编码
params = urllib.parse.urlencode(
{‘account’: account, ‘password’: password, ‘content’: text, ‘mobile’: mobile, ‘format’: ‘json’})
# 请求头
headers = {“Content-type”: “application/x-www-form-urlencoded”, “Accept”: “text/plain”}
# 通过全局的host去连接服务器
conn = http.client.HTTPConnection(host, port=80, timeout=30)
# 向连接后的服务器发送post请求,路径sms_send_uri是全局变量,参数,请求头
conn.request(“POST”, sms_send_uri, params, headers)
# 得到服务器的响应
response = conn.getresponse()
# 获取响应的数据
response_str = response.read()
# 关闭连接
conn.close()
# 把验证码放进session中
request.session[‘message_code’] = message_code
print(eval(response_str.decode()))
# 使用eval把字符串转为json数据返回
return JsonResponse({‘code’:200,‘mes’:‘提交成功’})
登录
class Login(View):
def get(self,request):
return render(request,‘moban_index.html’)
def post(self,request):
mobile = request.POST.get(‘mobile’)
password = request.POST.get(‘password’)
print(mobile,password)
if not all([mobile,password]):
return JsonResponse({‘code’:100,‘mes’:‘登录信息不完整’})
else:
user = models.User.objects.filter(mobile=mobile,password=password)
if user:
request.session[‘mobile’] = mobile
return JsonResponse({‘code’:200,‘mes’:‘登录成功’})
else:
return JsonResponse({‘code’:333,‘mes’:‘登录账号或密码错误’})
人脸快速登录
class Login_face(View):
def get(self,request):
return render(request,‘moban_index.html’)
def post(self,request):
imagecontent = request.POST.get(‘imagecontent’)
mobile = request.POST.get(‘mobile’)
if not all([imagecontent,mobile]):
return JsonResponse({‘code’:100,‘result’:‘登录信息不能为空’})
else:
user = models.User.objects.filter(mobile=mobile)
if not user:
return JsonResponse({‘code’:113,‘result’:‘用户不存在’})
else:
base_data = imagecontent.split(’,’)[1]
imageType = ‘BASE64’
groupIdList = ‘usergroup’
# 加入可选参数
options = {}
options[‘max_user_num’] = 1
options[‘quality_control’] = ‘NORMAL’
options[‘liveness_control’] = ‘LOW’
# options[‘user_id’] = mobile
result = AppConfig.client.search(base_data,imageType,groupIdList,options)
print(result)
error_code = result[‘error_code’]
# try:
user_id = result[‘result’][‘user_list’][0][‘user_id’]
score = result[‘result’][‘user_list’][0][‘score’]
if isinstance(error_code,int) and error_code == 0 and user_id == mobile and score >= 90:
request.session[‘mobile’] = mobile
return JsonResponse({‘code’:200,‘result’:‘快速登录成功’})
else:
return JsonResponse({‘code’:111,‘result’:‘快速登录失败’})
# except:
# return JsonResponse({‘code’:158,‘result’:‘未检测到人脸’})
class Home(View):
def get(self,request):
mobile = request.session.get(‘mobile’)
user = models.User.objects.filter(mobile=mobile).first()
if user:
return render(request,‘home.html’,locals())
else:
return JsonResponse({‘code’:111,‘result’:‘您还没有登录，不能访问’})
退出登录
class Logout(View):
def get(self,request):
del request.session[‘mobile’]
return redirect(reverse(‘index’))
‘’’
人流量统计
‘’’
import base64
import requests
import json,sys,ssl
client_id 为官网获取的AK， client_secret 为官网获取的SK
host = ‘https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=PGqsW2bf28QNZyyLHUz2hHxs&client_secret=aiwXL3tizgMcgj37dvdZcrqCCFfZGcB9’
headers = {‘Content-Type’:‘application/json; charset=UTF-8’}
response = requests.post(url=host,headers=headers)
content = json.loads(response.content.decode())
print(content.get(‘access_token’))
encoding:utf-8
request_url = “https://aip.baidubce.com/rest/2.0/image-classify/v1/body_num”
二进制方式打开图片文件
f = open(‘b.jpg’, ‘rb’)
#对图片进行base64编码
img = base64.b64encode(f.read())
params = {“image”:img,‘show’:True}
access_token = content.get(‘access_token’)
request_url = request_url + “?access_token=” + access_token
headers = {‘Content-Type’:‘application/x-www-form-urlencoded’}
response = requests.post(url=request_url, data=params,headers=headers)
content = json.loads(response.content.decode())
print(content.get(‘person_num’))
if content:
imgdata = base64.b64decode(content.get(‘image’))
file = open(‘2.jpg’,‘wb’)
file.write(imgdata)
file.close()
HTML
/。
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="../static/assets/css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="../static/assets/css/icomoon.css">
<!-- Themify Icons-->
<link rel="stylesheet" href="../static/assets/css/themify-icons.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="../static/assets/css/bootstrap.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="../static/assets/css/magnific-popup.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="../static/assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="../static/assets/css/owl.theme.default.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../static/assets/css/style.css">
<!-- Modernizr JS -->
<script src="../static/assets/js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="gtco-loader"></div>
<div id="page">
<div class="page-inner">
<nav class="gtco-nav" role="navigation">
<div class="gtco-container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div id="gtco-logo"><a href="index.html">嗨，终于等到您 <em>.</em></a></div>
</div>
<div class="col-xs-8 text-right menu-1">
<ul>
<!-- <li><a href="features.html">Features</a></li>
<li><a href="tour.html">Tour</a></li>
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">Web Design</a></li>
<li><a href="#">eCommerce</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">API</a></li>
</ul>
</li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact.html">Contact</a></li> -->
<!-- <li class="btn-cta"><a href="#"><span>登陆/注册</span></a></li> -->
</ul>
</div>
</div>
</div>
</nav>
<header id="gtco-header" class="gtco-cover" role="banner" style="background-image: url(../static/assets/img/img_4.jpg)">
<div class="overlay"></div>
<div class="gtco-container">
<div class="row">
<div class="col-md-12 col-md-offset-0 text-left">
<div class="row row-mt-15em">
<div class="col-md-7 mt-text animate-box" data-animate-effect="fadeInUp">
<span class="intro-text-small">life is sort , i like python</span>
<h1>滴滴滴！！！</h1>
</div>
<div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight">
<div class="form-wrap">
<div class="tab">
<ul class="tab-menu">
<li class="active gtco-first"><a href="#" data-tab="signup">注册</a></li>
<li class="gtco-second"><a href="#" data-tab="login">登陆</a></li>
<li><video id="v" style=" margin:10px auto;border-radius:50%;width:80px;height:60px;"></video>
<canvas id="canvas" style="display:none;"></canvas></li>
<!-- <br /> -->
<img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo" style=" margin:10px auto;border-radius:50%;width:80px;height:60px;">
</ul>
<div class="tab-content">
<div class="tab-content-inner active" data-content="signup">
<!-- <form action="{% url 'regist' %}" method="POST"> -->
<div class="row form-group">
<div class="col-md-12">
<input type="text" class="form-control" id="username" placeholder="用户名">
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<input type="text" class="form-control" id="mobile" placeholder="手机号">
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<input type="password" class="form-control" id="password" placeholder="密码">
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<!-- <input type="text" class="form-control" id="mobile_code" placeholder="验证码">
<input type="button" value=" 获取验证码" id="zphone"> -->
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label for="password2"><font color='green'>新用户点击注册会有面部特征收集哦?！</font></label>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<input type="submit" class="btn btn-primary" value="注册" id="regist">
</div>
</div>
<!-- </form> -->
</div>
<div class="tab-content-inner" data-content="login">
<!-- <form action="{% url 'login' %}" method="POST"> -->
<div class="row form-group">
<div class="col-md-12">
<input type="text" class="form-control" id="mobile1" placeholder="请输入手机号">
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<input type="password" class="form-control" id="password1" placeholder="请输入密码">
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<input type="submit" class="btn btn-primary" value="密码登陆" id="login">
<input type="submit" class="btn btn-primary" value="人脸登陆" id="login_face">
</div>
</div>
<!-- </form> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="gtco-section border-bottom">
<div class="gtco-container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center gtco-heading">
<h2>Beautiful Images</h2>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="../static/assets/img/img_2.jpg" class="fh5co-project-item image-popup">
<figure>
<div class="overlay"><i class="ti-plus"></i></div>
<img src="../static/assets/img/img_2.jpg" alt="Image" class="img-responsive">
</figure>
<div class="fh5co-text">
<h2>Constructive heading</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="../static/assets/img/img_3.jpg" class="fh5co-project-item image-popup">
<figure>
<div class="overlay"><i class="ti-plus"></i></div>
<img src="../static/assets/img/img_3.jpg" alt="Image" class="img-responsive">
</figure>
<div class="fh5co-text">
<h2>Constructive heading</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="../static/assets/img/img_4.jpg" class="fh5co-project-item image-popup">
<figure>
<div class="overlay"><i class="ti-plus"></i></div>
<img src="../static/assets/img/img_4.jpg" alt="Image" class="img-responsive">
</figure>
<div class="fh5co-text">
<h2>Constructive heading</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="../static/assets/img/img_1.jpg" class="fh5co-project-item image-popup">
<figure>
<div class="overlay"><i class="ti-plus"></i></div>
<img src="../static/assets/img/img_1.jpg" alt="Image" class="img-responsive">
</figure>
<div class="fh5co-text">
<h2>Constructive heading</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="../static/assets/img/img_5.jpg" class="fh5co-project-item image-popup">
<figure>
<div class="overlay"><i class="ti-plus"></i></div>
<img src="../static/assets/img/img_5.jpg" alt="Image" class="img-responsive">
</figure>
<div class="fh5co-text">
<h2>Constructive heading</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<a href="../static/assets/img/img_6.jpg" class="fh5co-project-item image-popup">
<figure>
<div class="overlay"><i class="ti-plus"></i></div>
<img src="../static/assets/img/img_6.jpg" alt="Image" class="img-responsive">
</figure>
<div class="fh5co-text">
<h2>Constructive heading</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia..</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div id="gtco-features" class="border-bottom">
<div class="gtco-container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center gtco-heading animate-box">
<h2>Splash Features</h2>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="ti-vector"></i>
</span>
<h3>Pixel Perfect</h3>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. </p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="ti-tablet"></i>
</span>
<h3>Fully Responsive</h3>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. </p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="ti-settings"></i>
</span>
<h3>Web Development</h3>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. </p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="ti-ruler-pencil"></i>
</span>
<h3>Web Design</h3>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. </p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="ti-paint-roller"></i>
</span>
<h3>Accent Colours</h3>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. </p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="ti-announcement"></i>
</span>
<h3>Theme Updates</h3>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. </p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="ti-stats-up"></i>
</span>
<h3>Increase Earnings</h3>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. </p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="feature-center animate-box" data-animate-effect="fadeIn">
<span class="icon">
<i class="ti-magnet"></i>
</span>
<h3>Passive Income</h3>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. </p>
</div>
</div>
</div>
</div>
</div>
<div id="gtco-counter" class="gtco-section">
<div class="gtco-container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center gtco-heading animate-box">
<h2>Fun Facts</h2>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 animate-box" data-animate-effect="fadeInLeft">
<div class="feature-center">
<span class="icon">
<i class="ti-settings"></i>
</span>
<span class="counter js-counter" data-from="0" data-to="22070" data-speed="5000" data-refresh-interval="50">1</span>
<span class="counter-label">Creativity Fuel</span>
</div>
</div>
<div class="col-md-3 col-sm-6 animate-box" data-animate-effect="fadeInLeft">
<div class="feature-center">
<span class="icon">
<i class="ti-face-smile"></i>
</span>
<span class="counter js-counter" data-from="0" data-to="97" data-speed="5000" data-refresh-interval="50">1</span>
<span class="counter-label">Happy Clients</span>
</div>
</div>
<div class="col-md-3 col-sm-6 animate-box" data-animate-effect="fadeInLeft">
<div class="feature-center">
<span class="icon">
<i class="ti-briefcase"></i>
</span>
<span class="counter js-counter" data-from="0" data-to="402" data-speed="5000" data-refresh-interval="50">1</span>
<span class="counter-label">Projects Done</span>
</div>
</div>
<div class="col-md-3 col-sm-6 animate-box" data-animate-effect="fadeInLeft">
<div class="feature-center">
<span class="icon">
<i class="ti-time"></i>
</span>
<span class="counter js-counter" data-from="0" data-to="212023" data-speed="5000" data-refresh-interval="50">1</span>
<span class="counter-label">Hours Spent</span>
</div>
</div>
</div>
</div>
</div>
<div id="gtco-products">
<div class="gtco-container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center gtco-heading">
<h2>More Products</h2>
<p>Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius.</p>
</div>
</div>
<div class="row">
<div class="owl-carousel owl-carousel-carousel">
<div class="item">
<a href="#"><img src="../static/assets/img/img_1.jpg" alt="Free HTML5 Bootstrap Template by "></a>
</div>
<div class="item">
<a href="#"><img src="../static/assets/img/img_2.jpg" alt="Free HTML5 Bootstrap Template by "></a>
</div>
<div class="item">
<a href="#"><img src="../static/assets/img/img_3.jpg" alt="Free HTML5 Bootstrap Template by "></a>
</div>
<div class="item">
<a href="#"><img src="../static/assets/img/img_4.jpg" alt="Free HTML5 Bootstrap Template by "></a>
</div>
</div>
</div>
</div>
</div>
<div id="gtco-subscribe">
<div class="gtco-container">
<div class="row animate-box">
<div class="col-md-8 col-md-offset-2 text-center gtco-heading">
<h2>Subscribe</h2>
<p>Be the first to know about the new templates.</p>
</div>
</div>
<div class="row animate-box">
<div class="col-md-8 col-md-offset-2">
<form class="form-inline">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" class="form-control" id="email" placeholder="Your Email">
</div>
</div>
<div class="col-md-6 col-sm-6">
<button type="submit" class="btn btn-default btn-block">Subscribe</button>
</div>
</form>
</div>
</div>
</div>
</div>
<footer id="gtco-footer" role="contentinfo">
<div class="gtco-container">
<div class="row row-p b-md">
<div class="col-md-4">
<div class="gtco-widget">
<h3>About <span class="footer-logo">您终于来了<span>.<span></span></h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eos molestias quod sint ipsum possimus temporibus officia iste perspiciatis consectetur in fugiat repudiandae cum. Totam cupiditate nostrum ut neque ab?</p>
</div>
</div>
<div class="col-md-4 col-md-push-1">
<div class="gtco-widget">
<h3>Links</h3>
<ul class="gtco-footer-links">
<li><a href="#">Knowledge Base</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Terms of services</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="gtco-widget">
<h3>Get In Touch</h3>
<ul class="gtco-quick-contact">
<li><a href="#"><i class="icon-phone"></i> +1 234 567 890</a></li>
<li><a href="#"><i class="icon-mail2"></i> info@</a></li>
<li><a href="#"><i class="icon-chat"></i> Live Chat</a></li>
</ul>
</div>
</div>
</div>
<div class="row copyright">
<div class="col-md-12">
<p class="pull-left">
<small class="block">Copyright © 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">网页模板</a></small>
</p>
<p class="pull-right">
<ul class="gtco-social-icons pull-right">
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
<li><a href="#"><i class="icon-dribbble"></i></a></li>
</ul>
</p>
</div>
</div>
</div>
</footer>
</div>
</div>
<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
</div>
<!-- jQuery -->
<script src="../static/assets/js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="../static/assets/js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="../static/assets/js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="../static/assets/js/jquery.waypoints.min.js"></script>
<!-- Carousel -->
<script src="../static/assets/js/owl.carousel.min.js"></script>
<!-- countTo -->
<script src="../static/assets/js/jquery.countTo.js"></script>
<!-- Magnific Popup -->
<script src="../static/assets/js/jquery.magnific-popup.min.js"></script>
<script src="../static/assets/js/magnific-popup-options.js"></script>
<!-- Main -->
<script src="../static/assets/js/main.js"></script>
</body>
<script>
!(function () {
// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的话，就获得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// 否则，为老的navigator.getUserMedia方法包裹一个Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
const constraints = {
video: true,
audio: false
};
videoPlaying = false;
v = document.getElementById('v');
promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(stream => {
// 旧的浏览器可能没有srcObject
if ("srcObject" in v) {
v.srcObject = stream;
} else {
// 防止再新的浏览器里使用它，应为它已经不再支持了
v.src = window.URL.createObjectURL(stream);
}
v.onloadedmetadata = function (e) {
v.play();
videoPlaying = true;
};
}).catch(err => {
console.error(err.name + ": " + err.message);
})
document.getElementById('regist').addEventListener('click', function () {
if (videoPlaying) {
mycanvas = document.getElementById('canvas');
mycanvas.width = v.videoWidth;
mycanvas.height = v.videoHeight;
mycanvas.getContext('2d').drawImage(v, 0, 0);
// 图片数据转换成数组
data = mycanvas.toDataURL('image/webp');
document.getElementById('photo').setAttribute('src', data);
// ajax提交数据到后台
$.ajax({
type:"POST",
url:'http://127.0.0.1:8000/regist/',
data:{username:$("#username").val(),mobile:$('#mobile').val(),password:$('#password').val(),mobile_code:$('#mobile_code').val(),imagecontent:data},
dataType:"json",
success:function(data){
alert(data.result)
$('#resText').text(data['result']);
if(data.code == 200){
window.location.href='http://127.0.0.1:8000/home/'
}else{
alert(data.result);
}
}
})
}
}, false);
document.getElementById('login').addEventListener('click', function () {
// if (videoPlaying) {
// mycanvas = document.getElementById('canvas');
// mycanvas.width = v.videoWidth;
// mycanvas.height = v.videoHeight;
// mycanvas.getContext('2d').drawImage(v, 0, 0);
// data = mycanvas.toDataURL('image/webp');
// document.getElementById('photo').setAttribute('src', data);
$.ajax({
type:"POST",
url:'http://127.0.0.1:8000/login/',
data:{mobile:$('#mobile1').val(),password:$('#password1').val()},
dataType:"json",
success:function(data){
$('#resText').text(data['result']);
document.getElementById('photo').setAttribute('src','static/'+data['point72src']);
console.log(data['point72src'])
if(data.code == 200){
window.location.href='http://127.0.0.1:8000/home/'
}else{
alert(data.mes);
}
}
})
// }
}, false);
document.getElementById('login_face').addEventListener('click', function () {
if (videoPlaying) {
mycanvas = document.getElementById('canvas');
mycanvas.width = v.videoWidth;
mycanvas.height = v.videoHeight;
mycanvas.getContext('2d').drawImage(v, 0, 0);
data = mycanvas.toDataURL('image/webp');
document.getElementById('photo').setAttribute('src', data);
$.ajax({
type:"POST",
url:'http://127.0.0.1:8000/login_face/',
data:{mobile:$('#mobile1').val(),imagecontent:data},
dataType:"json",
success:function(data){
$('#resText').text(data['result']);
document.getElementById('photo').setAttribute('src','static/'+data['point72src']);
console.log(data['point72src'])
if(data.code == 200){
alert(data.result)
window.location.href='http://127.0.0.1:8000/home/'
}else{
alert(data.result);
}
}
})
}
}, false);
// $('#zphone').click(
// function(){
// //发送验证码
// $.get('/send_message/', {mobile:$('#mobile').val()}, function(data) {
// alert(jQuery.trim(data.mes));
// if(data.mes=='提交成功'){
// RemainTime();
// }
// });
// })
// //按钮倒计时
// var iTime = 60;
// sTime = ''
// function RemainTime(){
// if (iTime == 0) {
// document.getElementById('zphone').disabled = false;
// sTime="获取验证码";
// iTime = 60;
// document.getElementById('zphone').value = sTime;
// return;
// }else{
// document.getElementById('zphone').disabled = true;
// sTime="重新发送(" + iTime + ")";
// iTime--;
// }
// setTimeout(function() { RemainTime() },1000)
// document.getElementById('zphone').value = sTime;
// }
// // 检查用户输入的手机号是否合法
// function check_mobile() {
// var re = /^1[345678]\d{9}$/; //校验手机号
// if(re.test($('#mobile').val()))
// {
// $('#mobile').next().hide();
// error_mobile = false;
// document.getElementById('zphone').disabled = false;
// }
// else
// {
// $('#mobile').next().html('你输入的手机格式不正确')
// $('#mobile').next().show();
// error_mobile = true;
// document.getElementById('zphone').disabled = true;
// }
// }
})();
</script>
用的是html模板,自行修改
扫一扫
2099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
