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/*">