WebOcr_CodingPark编程公园

项目说明

Web识别版Ocr项目
其中ocr内核为baidu-aip、前端内核为HTML+CSS+JS、后端内核为Python

Web识别版Ocr项目-工具包
web框架:tornado
pip install tornado
百度ocr包:baidu-aip
pip install baidu-aip

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


代码实战

在这里插入图片描述

前端

index.heml(主页面)

<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>智能信息处理研究所</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Free HTML5 Website Template by jq22.com" />
	<meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
	<meta name="author" content="jq22.com" />

	

  	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
	
	<!-- Animate.css -->
	<link rel="stylesheet" href="../static/css/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="../static/css/icomoon.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">

	<!-- Magnific Popup -->
	<link rel="stylesheet" href="../static/css/magnific-popup.css">

	<!-- Flexslider  -->
	<link rel="stylesheet" href="../static/css/flexslider.css">

	<!-- Theme style  -->
	<link rel="stylesheet" href="../static/css/style.css">

	<!-- Modernizr JS -->
	<script src="../static/js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
		<script src="../static/js/respond.min.js"></script>
		<![endif]-->

	</head>
	<body>
		
	<div class="fh5co-loader"></div>
	
	<div id="page">
	<nav class="fh5co-nav" role="navigation">
		<div class="container-wrap">
			<div class="top-menu">
				<div class="row">
					<div class="col-xs-2">
						<div id="fh5co-logo"><a href="index.html">智能信息处理研究所</a></div>
					</div>
					<div class="col-xs-10 text-right menu-1">
						<ul>
							<li class="active"><a href="index.html">主页</a></li>
							<li><a href="ocr.html">开发者端口</a></li>
							<li class="has-dropdown">
								<a href="#">企业级端口</a>
								<ul class="dropdown">
									<li><a href="#">税务局</a></li>
									<li><a href="#">身份录入</a></li>
									<li><a href="#">交管局</a></li>
									<li><a href="#">高校录取通知</a></li>
									<li><a href="#">快递单</a></li>
								</ul>
							</li>
							<li><a href="admin.html">管理员端口</a></li>
							<li><a href="contact.html">联系我们</a></li>
						</ul>
					</div>
				</div>
				
			</div>
		</div>
	</nav>
	<div class="container-wrap">
		<aside id="fh5co-hero">
			<div class="flexslider">
				<ul class="slides">
			   	<li style="background-image: url(../static/images/img_bg_1.jpg);">
			   		<div class="overlay-gradient"></div>
			   		<div class="container-fluid">
			   			<div class="row">
				   			<div class="col-md-6 col-md-offset-3 col-md-pull-3 slider-text">
				   				<div class="slider-text-inner">
				   					<h1>OCR文字识别-简要说明</h1>
										<h2>Optical Character Recognition system-brief description <a href="http://clsw2019.com/labWeb/View/index.php" target="_blank">Design by 智能信息处理研究所 ICAA</a></h2>
										<p><a class="btn btn-primary btn-demo" href="ocr.html"></i> Use OCR </a> <a class="btn btn-primary btn-learn" href="http://clsw2019.com/labWeb/View/index.php" target="_blank">Learn More</a></p>
				   				</div>
				   			</div>
				   		</div>
			   		</div>
			   	</li>
			   	<li style="background-image: url(../static/images/img_bg_2.jpg);">
			   		<div class="overlay-gradient"></div>
			   		<div class="container-fluid">
			   			<div class="row">
				   			<div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
				   				<div class="slider-text-inner">
				   					<h1>迄今为止做强大的管理系统</h1>
										<h2>Do a strong management system so far. <a href="http://clsw2019.com/labWeb/View/instituteOverview.php?classify=0" target="_blank">What we done</a></h2>
										<p><a class="btn btn-primary btn-demo" href="#"></i> Use OCR </a> <a class="btn btn-primary btn-learn" href="http://clsw2019.com/labWeb/View/index.php" target="_blank">Learn More</a></p>
				   				</div>
				   			</div>
				   		</div>
			   		</div>
			   	</li>
			   	<li style="background-image: url(../static/images/img_bg_3.jpg);">
			   		<div class="overlay-gradient"></div>
			   		<div class="container-fluids">
			   			<div class="row">
				   			<div class="col-md-6 col-md-offset-3 slider-text">
				   				<div class="slider-text-inner text-center">
				   					<h1>新手如何操作手册</h1>
										<h2>How teachers operate the manual How to use it.</h2>
										<p><a class="btn btn-primary btn-demo" href="#"></i> Use OCR </a> <a class="btn btn-primary btn-learn" href="http://clsw2019.com/labWeb/View/index.php" target="_blank">Learn More</a></p>
				   				</div>
				   			</div>
				   		</div>
			   		</div>
			   	</li>
			   	<li style="background-image: url(../static/images/img_bg_4.jpg);">
			   		<div class="overlay-gradient"></div>
			   		<div class="container-fluid">
			   			<div class="row">
				   			<div class="col-md-6 col-md-offset-3 col-md-push-3 slider-text">
				   				<div class="slider-text-inner">
				   					<h1>I Love to Tell My Story</h1>
										<h2>Let us have a good memory! <a href="http://clsw2019.com/labWeb/View/team_members.php?classify=0" target="_blank">ICAA.com</a></h2>
										<p><a class="btn btn-primary btn-demo" href="http://clsw2019.com/labWeb/View/index.php" target="_blank"></i> View ICAA </a> <a class="btn btn-primary btn-learn" href="http://clsw2019.com/labWeb/View/index.php" target="_blank">Learn More</a></p>
				   				</div>
				   			</div>
				   		</div>
			   		</div>
			   	</li>	   	
			  	</ul>
		  	</div>
		</aside>
		<div id="fh5co-services">
			<div class="row">
				<div class="col-md-4 text-center animate-box">
					<div class="services">
						<span class="icon">
							<i class="icon-diamond"></i>
						</span>
						<div class="desc">
							<h3><a href="Viewer.html">企业级端口</a></h3>
							<p>You can access all the data in our website You can access information such as photos of the team teacher, participating students (class, name) and certificates.</p>
						</div>
					</div>
				</div>
				<div class="col-md-4 text-center animate-box">
					<div class="services">
						<span class="icon">
							<i class="icon-lab2"></i>
						</span>
						<div class="desc">
							<h3><a href="#">开发者端口</a></h3>
							<p>You are our core, because you have this system.Enter specific competition information: A, B, and C specific competitions can only be selected.</p>
						</div>
					</div>
				</div>
				<div class="col-md-4 text-center animate-box">
					<div class="services">
						<span class="icon">
							<i class="icon-settings"></i>
						</span>
						<div class="desc">
							<h3><a href="#">管理员用户</a></h3>
							<p>You are the ambassador of this system. This system lets the world know because of your existence.</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- <div id="fh5co-work" class="fh5co-light-grey">
			<div class="row animate-box">
				<div class="col-md-6 col-md-offset-3 text-center fh5co-heading">
					<h2>端口选择</h2>
					<p>通过端口选择,根据您的身份进入学生竞赛管理系统 </br> Through the port selection, enter the student competition management system according to your identity </p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4 text-center animate-box">
					<a href="Viewer.html" class="work"  style="background-image: url(images/portfolio-1.jpg);">
						<div class="desc">
							<h3>访问者端口</h3>
							<span>点击进入</span>
						</div>
					</a>
				</div>
				<div class="col-md-4 text-center animate-box">
					<a href="index.html" class="work" style="background-image: url(images/portfolio-2.jpg);">
						<div class="desc">
							<h3>教师端口</h3>
							<span>点击进入</span>
						</div>
					</a>
				</div>
				<div class="col-md-4 text-center animate-box">
					<a href="index.html" class="work" style="background-image: url(images/portfolio-3.jpg);">
						<div class="desc">
							<h3>管理员端口</h3>
							<span>点击进入</span>
						</div>
					</a>
				</div>
			</div>
		</div> -->

		<div id="fh5co-counter" class="fh5co-counters">
			<div class="row">
				<div class="col-md-6 col-md-offset-3 text-center animate-box">
					<p>我们的不断追求的,是对高效安全信息库的定义 </br> What we are constantly pursuing is the definition of efficient security information base </p>
					</div>
			</div>
			<div class="row animate-box">
				<div class="col-md-8 col-md-offset-2">
					<div class="row">
						<div class="col-md-3 text-center">
							<span class="fh5co-counter js-counter" data-from="0" data-to="173452" data-speed="6000" data-refresh-interval="50"></span>
							<span class="fh5co-counter-label">日均访问者</span>
						</div>
						<div class="col-md-3 text-center">
							<span class="fh5co-counter js-counter" data-from="0" data-to="8234" data-speed="5000" data-refresh-interval="50"></span>
							<span class="fh5co-counter-label">竞赛结果</span>
						</div>
						<div class="col-md-3 text-center">
							<span class="fh5co-counter js-counter" data-from="0" data-to="1842" data-speed="4000" data-refresh-interval="50"></span>
							<span class="fh5co-counter-label">企业级用户</span>
						</div>
						<div class="col-md-3 text-center">
							<span class="fh5co-counter js-counter" data-from="0" data-to="26587" data-speed="3000" data-refresh-interval="50"></span>
							<span class="fh5co-counter-label">活跃用户</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div><!-- END container-wrap -->

	<div class="container-wrap">
		<footer id="fh5co-footer" role="contentinfo">
			<div class="row">
				<div class="col-md-3 fh5co-widget">
					<h4>关于 智能信息处理研究所</h4>
					<p>北京市信息研究计算所 </br> 地址:北四环健翔桥ICAA实验室 </br> 传真:68213773 </p>
				</div>
				<div class="col-md-3 col-md-push-1">
					<h4>Latest Posts</h4>
					<ul class="fh5co-footer-links">
						<li><a href="#">AmazingTeacher</a></li>
						<li><a href="#">100+ Awards</a></li>
						<li><a href="#">Services</a></li>
						<li><a href="#">Download 1000+ icons</a></li>
						<li><a href="#">Join Us Lab</a></li>
					</ul>
				</div>

				<div class="col-md-3 col-md-push-1">
					<h4>Links</h4>
					<ul class="fh5co-footer-links">
						<li><a href="#">Home</a></li>
						<li><a href="#">Tourist</a></li>
						<li><a href="#">Teacher</a></li>
						<li><a href="#">Admin</a></li>
						<li><a href="#">About us</a></li>
					</ul>
				</div>

				<div class="col-md-3">
					<h4>Contact Information</h4>
					<ul class="fh5co-footer-links">
						<li>North Fourth Ring Jianxiang Bridge ICAA Lab</li>
						<li><a href="tel://15801389712">15801389712</a></li>
						<li><a href="mailto:ag10304932@126.com">ag10304932@126.com</a></li>
						
					</ul>
				</div>

			</div>

			<div class="row copyright">
				<div class="col-md-12 text-center">
					<p>
						<small class="block">&copy; 2019 AG All Rights Reserved.</small> 
						<small class="block">Designed by Group-AG </small>
					</p>
					<p>
						<ul class="fh5co-social-icons">
							<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>
		</footer>
	</div>
	</div>	<!-- END container-wrap -->

	<div class="gototop js-top">
		<a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
	</div>
	
	<!-- jQuery -->
	<script src="../static/js/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="../static/js/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="../static/js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="../static/js/jquery.waypoints.min.js"></script>
	<!-- Flexslider -->
	<script src="../static/js/jquery.flexslider-min.js"></script>
	<!-- Magnific Popup -->
	<script src="../static/js/jquery.magnific-popup.min.js"></script>
	<script src="../static/js/magnific-popup-options.js"></script>
	<!-- Counters -->
	<script src="../static/js/jquery.countTo.js"></script>
	<!-- Main -->
	<script src="../static/js/main.js"></script>

	</body>
</html>


ocr.html(OCR识别)

<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>智能信息处理研究所</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Free HTML5 Website Template by jq22.com" />
	<meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
	<meta name="author" content="jq22.com" />



  	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
	<!-- 选择按钮 -->
	<link rel="stylesheet" type="text/css" href="../static/css/demoselect.css" />
	<link rel="stylesheet" type="text/css" href="../static/css/cs-select.css" />
	<link rel="stylesheet" type="text/css" href="../static/css/cs-skin-boxes.css" />

	<!-- 输入框 -->
	<link rel="stylesheet" type="text/css" href="../static/css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="../static/css/demo.css" />
	<link rel="stylesheet" type="text/css" href="../static/css/set1.css" />
	<!-- 按钮 -->
	<link rel="stylesheet" href="../static/css/set_1.css">
	<!-- Animate.css -->
	<link rel="stylesheet" href="../static/css/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="../static/css/icomoon.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">

	<!-- Magnific Popup -->
	<link rel="stylesheet" href="../static/css/magnific-popup.css">

	<!-- Flexslider  -->
	<link rel="stylesheet" href="../static/css/flexslider.css">

	<!-- Theme style  -->
	<link rel="stylesheet" href="../static/css/style.css">

	<!-- Modernizr JS -->
	<script src="../static/js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="../static/js/respond.min.js"></script>
	<![endif]-->

	</head>
	<body>

	<div class="fh5co-loader"></div>

	<div id="page">
	<nav class="fh5co-nav" role="navigation">
		<div class="container-wrap">
			<div class="top-menu">
				<div class="row">
					<div class="col-xs-2">
						<div id="fh5co-logo"><a href="index.html">智能信息处理研究所</a></div>
					</div>
					<div class="col-xs-10 text-right menu-1">
						<ul>
							<li class="active"><a href="index.html">主页</a></li>
							<li><a href="ocr.html">开发者端口</a></li>
							<li class="has-dropdown">
								<a href="#">企业级端口</a>
								<ul class="dropdown">
									<li><a href="#">税务局</a></li>
									<li><a href="#">身份录入</a></li>
									<li><a href="#">交管局</a></li>
									<li><a href="#">高校录取通知</a></li>
									<li><a href="#">快递单</a></li>
								</ul>
							</li>
							<li><a href="#">管理员端口</a></li>
							<li><a href="contact.html">联系我们</a></li>
						</ul>
					</div>
				</div>

			</div>
		</div>
	</nav>
	<div class="container-wrap">
		<aside id="fh5co-hero">
			<div class="flexslider">
				<ul class="slides">
			   	<li style="background-image: url(../static/images/img_bg_3.jpg);">
			   		<div class="overlay-gradient"></div>
			   		<div class="container-fluids">
			   			<div class="row">
				   			<div class="col-md-6 col-md-offset-3 slider-text slider-text-bg">
				   				<div class="slider-text-inner text-center">
				   					<h1>OCR 文字识别</h1>
										<h2>Optical  Character  Recognition</h2>
				   				</div>
				   			</div>
				   		</div>
			   		</div>
			   	</li>
			  	</ul>
		  	</div>
		</aside>
		<div id="fh5co-blog">
			<!-- 选择框 -->
			<div class="container">


			<section>

				<select class="cs-select cs-skin-boxes">

					<option value="" disabled selected>选择匹配模式</option>

					<option value="#588c75" data-class="color-588c75">阿里杯</option>

					<option value="#b0c47f" data-class="color-b0c47f">腾讯杯</option>

					<option value="#f3e395" data-class="color-f3e395">中国英才杯</option>

					<option value="#f3ae73" data-class="color-f3ae73">国际算法比赛</option>

					<option value="#da645a" data-class="color-da645a">C语言编程</option>

					<option value="#79a38f" data-class="color-79a38f">微软算法工程师</option>

					<option value="#c1d099" data-class="color-c1d099">人工智能杯</option>

					<option value="#f5eaaa" data-class="color-f5eaaa">大数据杯</option>

					<option value="#f5be8f" data-class="color-f5be8f">ACM</option>

					<option value="#e1837b" data-class="color-e1837b">暂未开通</option>

					<option value="#9bbaab" data-class="color-9bbaab">暂未开通</option>

					<option value="#d1dcb2" data-class="color-d1dcb2">暂未开通</option>

					<option value="#f9eec0" data-class="color-f9eec0">暂未开通</option>

					<option value="#f7cda9" data-class="color-f7cda9">暂未开通</option>

					<option value="#e8a19b" data-class="color-e8a19b">暂未开通</option>

					<option value="#bdd1c8" data-class="color-bdd1c8">暂未开通</option>

					<option value="#e1e7cd" data-class="color-e1e7cd">暂未开通</option>

					<option value="#faf4d4" data-class="color-faf4d4">暂未开通</option>

					<option value="#fbdfc9" data-class="color-fbdfc9">暂未开通</option>

					<option value="#f1c1bd" data-class="color-f1c1bd">暂未开通</option>

				</select>

			</section>



		</div><!-- /container -->








			<!-- 输入框 -->
			<div class="container">


			<!-- <section class="content" style="width:85%">
				<span class="input input--hoshi">
					<input class="input__field input__field--hoshi" type="text" id="input-4" />
					<label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
						<span class="input__label-content input__label-content--hoshi">学生姓名</span>
					</label>
				</span>
			</section>


			<section class="content" style="width:85%">
				<span class="input input--hoshi">
					<input class="input__field input__field--hoshi" type="text" id="input-4" />
					<label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
						<span class="input__label-content input__label-content--hoshi">学生学校</span>
					</label>
				</span>
			</section>
			<section class="content" style="width:85%">
				<span class="input input--hoshi">
					<input class="input__field input__field--hoshi" type="text" id="input-4" />
					<label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
						<span class="input__label-content input__label-content--hoshi">学生班级</span>
					</label>
				</span>
			</section>
			<section class="content" style="width:85%">
				<span class="input input--hoshi">
					<input class="input__field input__field--hoshi" type="text" id="input-4" />
					<label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
						<span class="input__label-content input__label-content--hoshi">学生年龄</span>
					</label>
				</span>
			</section> -->
			<!-- <section class="content" style="width:85%">
				<span class="input input--hoshi">
					<input class="input__field input__field--hoshi" type="text" id="input-4" />
					<label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
						<span class="input__label-content input__label-content--hoshi">Name</span>
					</label>
				</span>
			</section>
			<section class="content" style="width:85%">
				<span class="input input--hoshi">
					<input class="input__field input__field--hoshi" type="text" id="input-4" />
					<label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
						<span class="input__label-content input__label-content--hoshi">Name</span>
					</label>
				</span>
			</section> -->
			<form action="" method="post" target="nm_iframe" enctype="multipart/form-data">

				<div style="position: relative;width:85%;margin-top:50px;">

				 <!--设置input的position为absolute,使其不按文档流排版,并设置其包裹整个布局 -->
				 <!-- 设置opactity为0,使input变透明 -->
				 <!-- 只接受jpg,gif和png格式 -->
					 <input id="upload-input" style="margin-left: 400px;opacity: 1;" type="file" name="file" accept="image/gif, image/jpg, image/png" onchange="showImg(this)"/>			 <!-- 自定义按钮效果 -->
					 <div style="margin-top:20px;">
							 <span style="font-size: 15px;">上传文件:</span>
							 <img id="upload" src="../static/images/up.png" style="width: 200px; height: 145px; vertical-align: middle;" />
					 </div>


				</div>





				<section class="buttons" style="text-align:center;margin-top:20px;">
				<!--Set 1 start-->
				<div class="container_odd">
					<div class="set_container">
						<!--End of Button 1 -->
						<input type="submit"  value="确定输入" /> 
						<!--End of Button 2 -->
						<div style="clear:both"></div>
					</div>
				</div>



		<!--Set 1 end-->
				</section>

			</form>

		</div><!-- /container -->

		</div>
	</div><!-- END container-wrap -->

	<div class="container-wrap">
		<footer id="fh5co-footer" role="contentinfo">
			<div class="row copyright">
				<div class="col-md-12 text-center">
					<p>
						<small class="block">&copy; 2019 TEAM-AG All Rights Reserved.</small>
						<small class="block">Designed by 自然信息处理研究所 ICAA </small>
					</p>
					<p>
						<ul class="fh5co-social-icons">
							<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>
		</footer>
	</div><!-- END container-wrap -->
	</div>

	<div class="gototop js-top">
		<a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
	</div>

	<!-- jQuery -->
	<script src="../static/js/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="../static/js/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="../static/js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="../static/js/jquery.waypoints.min.js"></script>
	<!-- Flexslider -->
	<script src="../static/js/jquery.flexslider-min.js"></script>
	<!-- Magnific Popup -->
	<script src="../static/js/jquery.magnific-popup.min.js"></script>
	<script src="../static/js/magnific-popup-options.js"></script>
	<!-- Counters -->
	<script src="../static/js/jquery.countTo.js"></script>
	<!-- Main -->
	<script src="../static/js/main.js"></script>
	<!-- 选择框 -->
	<script src="../static/js/classie.js"></script>
	<!-- 选择框 -->
	<script src="../static/js/selectFx.js"></script>
	<!-- 选择框 -->
	<script>

		(function() {

			[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {

				new SelectFx(el, {

					stickyPlaceholder: false,

					onChange: function(val){

						document.querySelector('span.cs-placeholder').style.backgroundColor = val;

					}

				});

			} );

		})();

	</script>

<!-- 图片上传 -->
<script type="text/javascript">
    function showImg(input) {
        var file = input.files[0];
        var reader = new FileReader()
        // 图片读取成功回调函数
        reader.onload = function(e) {
            document.getElementById('upload').src=e.target.result
        }
        reader.readAsDataURL(file)
    }

</script>

	</body>
</html>


result.html(结果输出)

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>智能信息处理研究所</title>
		<meta name="description" content="A scrolling letters animation where some text changes depending on the page's scroll position" />
		<meta name="keywords" content="scroll, letters, animation, javascript, web design, web development" />
		
		<link rel="stylesheet" type="text/css" href="../static/css/Rebase.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/Redemo2.css" />
		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
	</head>
	<body class="demo-2 loading">
		<main>
			<div class="content">
				<header class="jq22-header">
					
					<h1 class="jq22-header__title">智能信息处理研究所-ICAA</h1>

					<a href="https://github.com/jq22/ScrollingLettersAnimation" title="Find this project on GitHub" class="github"><svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg></a>
				</header>
			</div>
			<div class="content">
				<div class="content__section">
					<div class="content__main">
						<span>信息生成中 请稍后</span>
					</div>
					<h2 class="content__text">下拉获取信息</h2>
				</div>
				
				<div class="text" style="text-align: center;font-size:26px;margin-left:60px;margin-right:60px;">
					
					{% for line in content %}
							<p>{{ line['words'] }}<p>
					{% end %}
					
				</div>



				<div class="content__section">
					<h2 class="content__text">提取结果</h2>
					<div class="content__contact">
						<a href="ocr.html"> 返回 </a>
					</div>
				</div>
			</div>
		</main>
		<script src="../static/js/imagesloaded.pkgd.min.js"></script>
		<script src="../static/js/charming.min.js"></script>
		<script src="../static/js/demo2.js"></script>
	</body>
</html>


后端

python书写 tornado框架

app.py(主程序)

# -*- encoding: utf-8 -*-
"""
@File    :   app.py    
@Contact :   ag@team-ag.club
@License :   (C)Copyright 2019-2020, CodingPark

@Modify Time      @Author    @Version    @Desciption
------------      -------    --------    -----------
2020-10-28 09:27   AG         1.0        ocrWebApp


README
网址 输入 : http://127.0.0.1/index.html 方可进入程序




"""
from tornado import httpserver, web, ioloop
from wordOcr import get_word_by_image


# 功能模块    (部门)
class MainPageHandler(web.RequestHandler):
    def get(self, *args, **kwargs):
        # self.write('欢迎大家来到智能信息处理研究所')
        self.render('index.html')




class OcrPageHandler(web.RequestHandler):
    def get(self, *args, **kwargs):
        # self.write('欢迎大家来到智能信息处理研究所')
        self.render('ocr.html')

    def post(self, *args, **kwargs):
        # 接受file
        file = self.request.files.get('file')[0]
        res = get_word_by_image(file['body'])
        print(res)
        self.render('result.html', content=res['words_result'])

        # with open('test.jpg', 'wb') as f:     # 看一下前端传的图片
        #     f.write(file['body'])

class contactUs(web.RequestHandler):
    def get(self, *args, **kwargs):
        # self.write('欢迎大家来到智能信息处理研究所')
        self.render('contact.html')




# 设置
settings = {
    'template_path': 'templates',
    'static_path': 'static'
}




# 路由    (分机)
application = web.Application([
            (r"/index.html", MainPageHandler), (r"/ocr.html", OcrPageHandler), (r"/contact.html", contactUs),
        ], **settings)


# socket 服务  (前台)
if __name__ == '__main__':
    http_server = httpserver.HTTPServer(application)
    http_server.listen(80)      # 端口 80 在网页输入ip时可以被省略
    ioloop.IOLoop.current().start()




wordOcr.py(ocr识别内核)

# -*- encoding: utf-8 -*-
"""
@File    :   wordOcr.py    
@Contact :   ag@team-ag.club
@License :   (C)Copyright 2019-2020, CodingPark

@Modify Time      @Author    @Version    @Desciption
------------      -------    --------    -----------
2020-10-28 18:30   AG         1.0         None
"""

from aip import AipOcr

APP_ID = '----填写自己的序列号-----'
APP_KEY = '-----填写自己的序列号-----'
SECRET_KEY = '-----填写自己的序列号-----'


def get_word_by_image(image, _type=None):
    client = AipOcr(APP_ID, APP_KEY, SECRET_KEY)
    options = {'probability': 'true'}
    options["detect_direction"] = "true"
    if _type:
        res = client.basicAccurate(image, options=options)
    else:
        res = client.basicGeneral(image, options=options)

    return res



在这里插入图片描述

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页
实付 79.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值