JavaScript的文本識別和OCR對<canvas>

Question

我發現，識別手寫數學公式Web應用程序：

http://webdemo.visionobjects.com/equation.html?locale=default

我想知道，如果有人知道一個應用程序或教程或開放源項目實現這個機制，因爲從這個webapp獲取它真的很複雜。

注意：我只需要在畫布中繪製的方程式在輸入文本框中進行翻譯即可。

Answer 1

Tesseract OCR已被ported to JavaScript。

Answer 2

有很多公知的OCR庫如OCRAD.js​​和幾個emscripten.js端口。

Answer 3

Google Cloud Vision是一個非常準確的OCR服務，它的free for up to 1000 requests per month。通過它的REST API也很容易使用。在下面的代碼片段中，最難的部分是從用戶那裏獲取圖像並在Base64中對其進行編碼。

var GCVUrl = 'https://vision.googleapis.com/v1/images:annotate?key=XXX'; 
 
// Enable the Cloud Vision API and get a key - see 
 
// https://cloud.google.com/vision/docs/quickstart 
 
var input = document.querySelector('input[type=file]'); 
 
var fileReader = new FileReader(); 
 

 
input.onchange = function (event) { 
 

 
    var file = event.target.files[0]; 
 

 
    fileReader.onload = function(fileLoadedEvent) { 
 
    var GCVRequest = { 
 
     requests: [{ 
 
     image: { 
 
      content: fileLoadedEvent.target.result.split(',')[1] 
 
      // must discard `data:image/png;base64,` 
 
     }, 
 
     features: [{type: 'TEXT_DETECTION'}] 
 
     }] 
 
    }; 
 

 
    $.ajax({ 
 
     type: 'POST', 
 
     url: GCVUrl, 
 
     dataType: 'json', 
 
     contentType: 'application/json', 
 
     data: JSON.stringify(GCVRequest), 
 
     success: function (data) { 
 
     var texts; 
 
     if (texts = data.responses[0].textAnnotations) { 
 
      alert(texts[0].description); 
 
     } else { 
 
      alert('No text was recognized'); 
 
     } 
 
     }, 
 
     error: function(jqXhr, textStatus, error) { 
 
     alert('XHR error: ' + jqXhr.responseJSON.error.message); 
 
     } 
 
    }); 
 

 
    }; 
 

 
    fileReader.readAsDataURL(file); 
 

 
};

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<input type="file" accept="image/*">