5、接入微信的前端（1）我们先写好网页部分。
接入微信的前端
这里用到了 jq weui
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>识别人脸</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
<meta
name="description"
content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description."
/>
<link
rel="stylesheet"
href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css"
/>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
<style>
.toolbar .picker-button,
.weui-cells_radio .weui-check:checked + .weui-icon-checked:before {
color: rgb(58, 95, 124);
}
body,
html {
height: 100%;
-webkit-tap-highlight-color: transparent;
}
.demos-title {
text-align: center;
font-size: 34px;
color: #3cc51f;
font-weight: 400;
margin: 0 15%;
}
.demos-sub-title {
text-align: center;
color: #888;
font-size: 14px;
}
.demos-header {
padding: 35px 0;
}
.demos-content-padded {
padding: 15px;
}
.demos-second-title {
text-align: center;
font-size: 24px;
color: #3cc51f;
font-weight: 400;
margin: 0 15%;
}
footer {
text-align: center;
font-size: 14px;
padding: 20px;
}
footer a {
color: #999;
text-decoration: none;
}
</style>
<style>
/*css */
* {
margin: 0;
padding: 0;
}
.title {
margin: 10px;
text-align: center;
}
.textcenter {
text-align: center;
}
.textleft {
text-align: left;
}
.textright {
text-align: right;
}
body {
background: #fbfbfb;
}
.body {
padding: 0 0.9em;
font-size: 0.88em;
min-width: 300px;
max-width: 480px;
margin: 0 auto;
}
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: aquamarine;
margin: 100px auto;
}
.wjj {
width: 100%;
height: 100%;
margin: 0 auto;
background-repeat: no-repeat;
background-size: 80% 80%;
background-position: center;
background-image: url(img/wjj.png);
}
.zxj {
width: 100%;
height: 100%;
margin: 0 auto;
background-repeat: no-repeat;
background-size: 80% 80%;
background-position: center;
background-image: url(img/zxj.png);
}
</style>
</head>
<body ontouchstart>
<div class="weui-tab">
<div class="weui-tab__bd">
<div
id="tab1"
class="weui-tab__bd-item weui-tab__bd-item--active"
>
<div class="title"><h1>识别口罩</h1></div>
<div class="box" onclick="yuche()">
<div class="wjj"></div>
</div>
<div class="box">
<div class="zxj"></div>
</div>
</div>
<div id="tab2" class="weui-tab__bd-item">
<div class="title"><h1>敬请期待</h1></div>
</div>
</div>
<div class="weui-tabbar">
<a href="#tab1" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<img src="img/icon_nav_article.png" alt="" />
</div>
<p class="weui-tabbar__label">识别口罩</p>
</a>
<a href="#tab2" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<img src="img/icon_nav_cell.png" alt="" />
</div>
<p class="weui-tabbar__label">识别男女</p>
</a>
</div>
</div>
<div style="display: none">
<input
id="uploaderInput"
class="weui-uploader__input"
type="file"
accept="image/*"
multiple=""
onchange="compress()"
/>
</div>
<script>
// 对图片进行压缩,并上传
function compress() {
var fileObj = document.getElementById('uploaderInput').files[0] //上传文件的对象
var namefile = fileObj.name
let reader = new FileReader()
reader.readAsDataURL(fileObj)
reader.onload = function (e) {
let image = new Image() //新建一个img标签（还没嵌入DOM节点)
image.src = e.target.result
image.onload = function () {
let canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = image.width / 3, //压缩后图片的大小
imageHeight = image.height / 3,
data = ''
canvas.width = imageWidth
canvas.height = imageHeight
context.drawImage(image, 0, 0, imageWidth, imageHeight)
var base64 = canvas.toDataURL('image/jpeg')
// 去掉url的头，并转换为byte
const bytes = window.atob(base64.split(',')[1])
// 处理异常,将ascii码小于0的转换为大于0
const ab = new ArrayBuffer(bytes.length)
const ia = new Uint8Array(ab)
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i)
}
file = new File([ab], namefile, { type: 'image/png' })
//file.type = "jpeg";
var formData = new FormData()
formData.append('File', file)
var settings = {
url: 'http://localhost:5000/api/discern/kouzhao',
method: 'POST',
timeout: 0,
processData: false,
mimeType: 'multipart/form-data',
contentType: false,
data: formData,
}
$.ajax(settings).done(function (response) {
console.log(response)
$.alert(response, '识别结果')
})
var file = document.getElementById('file')
file.value = '' //file的value值只能设置为空字符串
}
}
}
</script>
<script>
function yuche() {
$('#uploaderInput').click()
}
</script>
</body>
</html>
到这里就是 接入微信前端 的全部内容了，后续会继续出如何接入微信公众号的 过程
欢迎进qq群交流：704028989
