提取自该博文在线中文字符识别网站(前后端分离 REST)
单独分析总结
Ajax完成图像后端的传输以及显示从后端返回的结果
定义FormData类型
(是在XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利。)
formdata = new FormData(); // 定义formdata变量 Formdata是不是特殊的数据类型
用jquery获取上传表单中的图片数据
var file = $('#photo')[0].files[0]; // 把图片数据用file变量表示
封装到创建的FormData对象中
formdata.append('image',file); // 把图片数据封装到formdata变量中
使用jquery构造ajax请求
$.ajax({
url:'/ocr/', // 发送地址是ocr url地址写错/ocr 导致Not Found: /ocr;地址后还要加/
type:'POST', // 发送方式是post
data:formdata, //发送的数据是formdata
dataType:'json', // 数据类型是json
processData:false,
contentType:false,
success:ShowResult //收到结果后,执行ShowResult函数,将输出文本的值改为识别到的文字信息
})
前端页面通过showResult函数获得后端传来的信息在渲染到前端指定页面处
function ShowResult(data){
output.value = data['output'];
}
补充后端获取前端图片数据的方法,通过判断request请求是否为post请求来处理;request.FILES["image"]中的image是FormData封装的数据类型为字典的键,用该键获取值
if request.method == 'POST':
img = read_image(stream = request.FILES["image"])
后端处理图片后返回数据给前端;返回的字段是output键,前端读取数据从showResult函数中的data对象读取
code = pytesseract.image_to_string(img,lang='chi_sim')
result.update({"output":code}) # ()内加了引号,字典外加引号,这错误哎;这里字典只要值加"",键不需要
完整处理图片代码
# 将所有的静态资源文件按照文件夹路径创建对应的视图处理函数
# 以文件读取方式获取文件内容并通过HttpResponse返回
# 我并没有用django模板创建文件,这个只是我搭建罢了
# 调用django属性,创建静态资源路径
import numpy as np # numpy不会有,至少要会用来图像分割
import urllib # 也不熟,很少用他做爬虫
import json # json数据返回的包
import cv2 # 要学的,重点,但我不会
import pytesseract # 文字识别包
from PIL import Image # 图像处理的
import os
from django.views.decorators.csrf import csrf_exempt # 防止啥csrf_什么的攻击
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) # cv2处理不知
return image
@csrf_exempt # 用于规避跨站点请求攻击
def ocrDetect(request):
result = {'code':None}
if request.method == 'POST':
img = read_image(stream = request.FILES["image"])
# OpenCV转PIL
# frommarry写错他显示白色,就代表他不是函数;fromarray才是
# COLOR_BAYER_BG2BGR写错这是编辑器快速提示时没看直接选的
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)
完整ajax代码
<script>
// 图像发送至后台服务器进行识别
$('#recognition').click(function(){
formdata = new FormData(); // 定义formdata变量 Formdata是不是特殊的数据类型
var file = $('#photo')[0].files[0]; // 把图片数据用file变量表示
formdata.append('image',file); // 把图片数据封装到formdata变量中
$.ajax({
url:'/ocr/', // 发送地址是ocr url地址写错/ocr 导致Not Found: /ocr;地址后还要加/
type:'POST', // 发送方式是post
data:formdata, //发送的数据是formdata
dataType:'json', // 数据类型是json
processData:false,
contentType:false,
success:ShowResult //收到结果后,执行ShowResult函数,将输出文本的值改为识别到的文字信息
})
})
</script>
<!--返回结果显示-->
<script>
function ShowResult(data){
output.value = data['output'];
}
</script>