10

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.

Mikko Ohtamaa
  • 82,057
  • 50
  • 264
  • 435
Elie
  • 337
  • 3
  • 6
  • 14
  • 1
    Super cool find. It looks like they have some backend code turning coordinates into values for latex and json. – Shanimal Mar 05 '13 at 17:28

3 Answers3

9

Tesseract OCR has been ported to JavaScript.

Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404
Jack burridge
  • 472
  • 7
  • 21
7

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/*">
Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404
  • 1
    Just a note on this, you now need a billing account and budget to not get a 403 error. Also I'm splitting on `';base64,'` not just comma. Things I'd like to solve with it (probably async await & transpiler) are mapping multiple files to the request, then handle multiple responses. – MrMesees May 24 '18 at 10:27
4

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

Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404
sebasmagri
  • 170
  • 2
  • 10