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.

Joerg

Super cool find. It looks like they have some backend code turning coordinates into values for latex and json. – Acosmism

Answer 1

Tesseract OCR has been ported to JavaScript.

Airel

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

Vigilance

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. – Supererogate

Answer 3

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

Illumination