JavaScript文本识别和<canvas>上的OCR

Question

我找到了一个识别手写数学方程式的Web应用程序:

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

我想知道是否有人知道应用程序或教程或实现此机制的开源项目,因为从这个webapp获取它真的很复杂.

注意:我只需要将画布中绘制的等式转换为输入文本框即可.

Answer 1

Tesseract OCR已移植到JavaScript.

Answer 2

Google Cloud Vision是一种非常准确的OCR服务,每月最多可提供1000个请求.它也可以通过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/*">