提取自該博文線上中文字元識別網站(前後端分離 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>