手写数字识别的全栈尝试

心血来潮想进行一次full stack尝试，以前一直做单机的开发，没有做过web service。web service比单机应用会更加容易传播，不会对用户有太多的要求。之前就有考虑过前端和后台通信的问题，但一直没有真正去实现过，这次还是遇到了一些问题。

整个项目的逻辑是，用户在前端网页手写一个数字，前端将图片发送给后台，后台对图片进行识别，将识别结果返回给前端。整个项目是基于Django，Django是一个Python的web应用框架，很好地将前后端结合起来，方便开发。前端部分，写了一个简单的网页，主体是个canvas，用户可以在canvas上进行画写。后端用python写的，用tensorflow训练好的模型进行预测。

项目上传在github上, 网站demo部署在heroku，刚连接时可能需要等待，因为太久没有连接，网站会进入睡眠状态。

---

前端

前端之前不是很熟悉，花了几天看了下htmL+css+js，能够写一些简单的东西，还用了bootstrap库来快速开发。说实话，我是真的没有任何美感啊…做东西完全做的不好看。

基本的界面如下：

前端将canvas转化为图像数据的代码如下：

var scribbler = document.getElementById ("the_stage");var imageData =  scribbler.toDataURL('image/png');var dataTemp = imageData.substr(22);

---

后端

用python语言写的，工作流程如下：

• 响应前端请求
• 解析数据成图像数据并进行预处理
• 用tensorflow进行识别
• 将识别结果返回给后端

前端传来的数据是经过base64编码的，我们解码后将其转换为numpy矩阵，就能用opencv的一些函数进行处理，将3通道转为灰度图，并resize成28x28大小，最后拉成1x784的矩阵，进行识别。

预处理部分还加入了一些位置的控制，找到数字位置并把其移到图像中央。有个有趣的地方是调用opencv的resize函数有个插值参数可选，如果用它默认的线性插值的话，最后得到的识别结果并不好，尝试了几个最后选用的最近邻插值，效果不错。

识别部分是用tensorflow训练好的模型进行预测，就是tensorflow官网的tutorial中的模型。

解析接收数据部分代码：

imgStr = request.POST.get('txt')  #'txt'是传送的json数据中图像数据对应的keyimgStr = base64.b64decode(imgStr)img = cv2.imdecode(numpy.array(bytearray(imgStr)), -1)

---

前后端通信

这部分是我整个项目中关注的重点，之前对前后端通信不是很了解。

前端发送请求是通过url方式进行的，如访问url：www.xx.com/index，Django将url和python的函数绑定，函数用来响应请求：

from mnist.view import indexurlpatterns = [url(r'^index', index)]

index函数如下，其返回index.html网页数据，前端获取到网页，就能加载在浏览器上：

def index(request):    return render(request, 'index.html')

上面提到发送请求是通过url方式的，并且一个url对应一个python的响应函数，这样前端就能发送数据给后台并接收后台处理后的数据。假设前端是把json数据post过来的，后端函数可以通过 request.POST.get('txt')来获取json数据中“txt”这个key所对应的value。处理完毕后可以通过HttpResponse来返回数据给前端。

ajax

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。后端把识别结果发送给前端，前端就能把结果更新在识别结果的区域。

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。 $.post(URL,data,callback);

• URL：希望请求的url
• data：发送的数据
• callback：请求成功后执行的函数

在这里，url绑定着后端的识别函数，data是要发送的手写数据，callback是成功后把识别结果显示在识别结果区域的js函数。

---

部署heroku

将项目部署在了国外的一个云平台heroku上，部署好会给你的项目分配一个网址，很方便。当然免费的东西还是有局限的地方，首先，在国外，可能连接比较慢；再是，网站长时间没有别访问，系统会将其变成睡眠状态，再次连接时可能要等待一会。

不过能给开发者提供这样一个测试的平台，heroku还是相当好的，不用自己花钱去租服务器或者vps了。

---

• 我的github上博客：http://zealerww.github.io/
• github主页：https://github.com/zealerww