• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41

在style.css文件中添加分割线对应的样式设计：

div.hr?{
????height:?3px;
????background:?#818080;
}
div.hr?hr?{
????display:?none;
}
1
2
3
4
5
6
7

为了能够实现图像浏览和上传的功能，需要使用js来实现。具体的，在部分末尾添加代码：

1
2
3
4
5
6
7
8
9
10
11
12

接下来，在前端页面中继续添加代码完成图像向后端的传输以及获取到后端发来的结果后的显示处理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

图像的传输采用了Ajax技术，当用户单击“识别”按钮时将图像数据封装到formdata变量并发送至后端，发送地址为’/ocr/'，发送方式为POST。收到结果后执行ShowResult函数，将输出文本的值改为识别到的文字信息。

保存所有修改后，用浏览器直接打开index.html页面，单击“浏览”按钮，选择一张待识别的图片进行上传，可以看到选择的图片显示在指定位置，如图2所示。

▍图2前端开发效果图

到这里我们发现整个的前端设计和开发不再依赖后端服务器，并且由于页面没有嵌入Django模板标签，因此可以直接被浏览器解析和运行。这种前后端分离的开发模式可以极大的提高团队开发人员的沟通效率，使得项目的协同合作更加方便。

04、后端开发

我们继续将对后端进行开发。一般情况下，采用前后端分离机制以后前端静态资源（html页面、css样式文件、jpg图片等）会采用额外的前端服务器来提供静态文件服务。我们为了简化服务器的搭建和使用，依然使用Django来提供静态文件服务，将所有的静态资源例如css、js和jpg图片文件等按照文件夹路径创建对应的视图处理函数，以文件读取方式获取文件内容并通过HttpResponse返回。

在views.py文件中添加代码如下：

def?read_css(request,?filename):
????with?open('frontend/css/{}'.format(filename),?'rb')?as?f:
????????css_content?=?f.read()
????print('css文件')
????return?HttpResponse(content=css_content,?content_type='text/css')

def?read_js(request,?filename):
????with?open('frontend/js/{}'.format(filename),?'rb')?as?f:
????????js_content?=?f.read()
????print('js文件')
????return?HttpResponse(content=js_content,
????????????????????????content_type='application/JavaScript')

def?read_img(request,?filename):
????with?open('frontend/img/{}'.format(filename),?'rb')?as?f:
????????img_content?=?f.read()
????print('img文件')
????return?HttpResponse(content=img_content,?content_type='image/jpeg')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上述代码分别创建js、css和jpg文件访问的视图处理函数，然后在urls.py文件中设置访问路由：

from?app.views?import?read_css,?read_js,?read_img

urlpatterns?=?[
????...其他路由...
????path('css/',?read_css,?name='read_css'),
????path('js/',?read_js,?name='read_js'),
????path('img/',?read_img,?name='read_img'),
]
1
2
3
4
5
6
7
8

通过这种方式，可以使得在不改变前端代码的情况下能够正确的提供静态资源请求服务。重新编辑views.py中的home函数：

def?home(request):
????with?open('frontend/index.html','rb')?as?f:
????????html?=?f.read()
????return?HttpResponse(html)
1
2
3
4

同样的，html页面也以文件读取方式获取内容并通过HttpResponse返回。保存所有修改后启动项目：

python?manage.py?runserver
1

打开浏览器查看页面效果。可以发现页面效果与使用浏览器直接打开index.html页面相同。这说明，后端服务器正确的充当了静态资源服务器的角色，在不使用Django模板标签的情况下能够实现前端页面的正确渲染。

最后需要开发中文字符识别对应的Ajax视图处理函数。为了实现中文字符识别，我们采用开源库Tesseract-OCR来进行文字识别任务。Tesseract是惠普布里斯托实验室在1985~1995年间开发的一个开源的字符识别引擎，曾经在1995 UNLV精确度测试中名列前茅。2005年，惠普将其对外开源。2006年由Google对Tesseract进行改进并对其进行深度优化。

Tesseract的下载网址为：

https://digi.bib.uni-mannheim.de/tesseract/。根据系统版本进行选择，如果使用Windows 64位系统，可以下载windows 64对应的版本：tesseract-ocr-w64-setup-v4.1.0.20190314.exe。下载完成后双击进入安装界面，展开Additional language data，勾选arabic和Chinese simplified使得能够同时支持阿拉伯数字和简体中文字符的识别。

▍图 3 Tesseract-OCR安装界面

为了能够在Python中使用该引擎库，需要安装对应的Python库：

pip?install?pytesseract
1

然后修改pytesseract库文件，在pytesseract安装包中找到pytesseract.py文件，修改tesseract_cmd字段的值，将tesseractOCR的安装目录填入其中：

tesseract_cmd?=?r'	esseract.exe'
1

通过上述修改，就可以使得Python能够找到本地的文字识别程序完成识别。接下来在views.py文件中添加视图处理函数，完整代码如下：

import?numpy?as?np????
import?urllib?????????
import?numpy?as?np????
import?urllib?????????
import?json??????????
import?cv2??????????
import?pytesseract
from?PIL?import?Image
import?os??
from?django.views.decorators.csrf?import?csrf_exempt?
from?django.http?import?JsonResponse??

def?read_image(stream=None):
????data_temp?=?stream.read()
????image?=?np.asarray(bytearray(data_temp),?dtype="uint8")
????image?=?cv2.imdecode(image,?cv2.IMREAD_COLOR)
????return?image

@csrf_exempt??#?用于规避跨站点请求攻击
def?ocrDetect(request):
????result?=?{"code":?None}??
????if?request.method?==?"POST":
????????if?request.FILES.get("image",?None)?is?not?None:??
????????????img?=?read_image(stream=request.FILES["image"])
????????#?OpenCV转PIL
????????img?=?Image.fromarray(cv2.cvtColor(img,?cv2.COLOR_BGR2RGB))
????????#?执行识别
????????code?=?pytesseract.image_to_string(img,?lang='chi_sim')
????????result.update({"output":?code})
????return?JsonResponse(result)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

通过客户端浏览器上传的图像照片进行识别处理然后返回结果，不同之处在于此处返回的结果是以JSON字符串形式给出，不需要再额外的进行图像编码。识别部分主要采用pytesseract.image_to_string函数进行识别，其中lang='chi_sim’表示当前识别中文简体字符。

最后，在urls.py文件的urlpatterns字段中添加对应的路由：

path('ocr/',?ocrDetect,?name='ocrDetect'),??#?在线中文字符识别api
1

完成所有修改后保存并运行项目，最终识别效果如图4所示。

▍图 4 中文字符识别效果图

经过测试，tesseract—OCR对于印刷体中文字符效果较好，对于手写体中文字符效果一般。如果需要更高的检测精度和更好的适应性，则需要进一步优化算法。

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦