阅读 27

(五)接入微信的前端(1)我们先写好网页部分

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

文章分类
后端
文章标签