Python Web: Django REST项目实战 前端开发
来自CloudWiki
背景
开发一个在线中文字符识别系统，
用户在网页上上传图片，然后通过Ajax技术将图片上传至后台服务器，
后台调用中文字符识别算法将图片中的文字识别出来，并以JSON字符串的形式返回结果给前端页面进行显示。
开发分为前端和后台，前后端之间所有的交互通过API进行。
实训步骤
准备静态资源
采用Bootstrap框架设计页面，
将Bootstrap有关文件安文件类型放置在frontend/css 和frontend/js中，然后在img文件夹下放一张sample.img图片用于展示图像显示区域
在css文件夹下新建一个空的style.css，作为个性化定制使用。
编写页面头部
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>在线中文字符识别</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
编写网页主干
<div class="container">
<!-- 标题 -->
<div class="row">
<div class="col-lg-12">
<p class="text-center h1">
在线中文字符识别
</p>
</div>
</div>
<!-- 分隔符 -->
<div class="hr">
<hr />
</div>
<!-- 主体内容 -->
<div class="row">
<br>
<!-- 图片上传 -->
<div class="col-md-6">
<img id="photoIn" src="img/sample.jpg" class="img-responsive">
<input type="file" id="photo" name="photo" />
</div>
<!-- 运行结果 -->
<div class="col-md-6">
<div class="col-md-12">
<textarea id="output" disabled class="form-control" rows="5">
</textarea>
</div>
<br>
<div class="col-md-12">
<p class="text-center h4">识别结果</p>
</div>
</div>
</div>
<br>
<div class="row">
<div class="text-center">
<button type="button" id="recognition" class="btn btn-primary">识别</button>
</div>
</div>
</div>
在style.css中添加分割线对应的样式设计：
div.hr {
height: 3px;
background: #818080;
}
div.hr hr {
display: none;
}
添加JS代码，实现图片浏览和上传
显示上传的图片：
<script>
$(function () {
$('#photo').on('change', function () {
var r = new FileReader();
f = document.getElementById('photo').files[0];
r.readAsDataURL(f);
r.onload = function (e) {
document.getElementById('photoIn').src = this.result;
};
});
});
</script>
将上传的图片向后端传输：
<!-- 图像发送至后台服务器进行识别 -->
<script>
$('#recognition').click(function () {
formdata = new FormData();
var file = $("#photo")[0].files[0];
formdata.append("image", file);
$.ajax({
url: '/ocr/', // 调用Django服务器计算函数
type: 'POST', // 请求类型
data: formdata,
dataType: 'json', // 期望获得的响应类型为json
processData: false,
contentType: false,
success: ShowResult // 在请求成功之后调用该回调函数输出结果
})
})
</script>
<!-- 返回结果显示 -->
<script>
function ShowResult(data) {
output.value = data['output'];
}
</script>
- 图像传输采用了Ajax技术，当用户点击“识别”按钮时将图像数据封装到formdata变量并发送至后端，
- 发送地址为/ocr ,发送方式为POST
- 收到结果后执行ShowResult()函数，输出识别信息。
验证
用浏览器打开，并上传图片.
