JavaScript text recognition and OCR on <canvas> [closed]

Question

I found a web application that recognizes handwritten math equations:

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

I would like to know if someone knows an app or a tutorial or an open source project that implements this mechanism, because getting it from this webapp is really complex.

Note: I just need the equation drawn in the canvas to be translated in an input text box that's all.

Answer 1

Tesseract OCR has been ported to JavaScript.

Answer 2

Google Cloud Vision is a very accurate OCR service, and it's free for up to 1000 requests per month. It's also easy to use via its REST API. In the snippet below, the hard part is getting an image from the user and encoding it in 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/*">

Answer 3

There are several emscripten.js ports of well known OCR libraries such as OCRAD.js and GOCR.