How To Get Ocrad.js Example To Work

I am making an OCR (optical character recognition) web application, and I found the JavaScript library Ocrad.js, which is exactly what I was looking for, but I can't get it to work

Solution 1:

You can't just pass an <img> element to the OCRAD() function.

From the Ocrad.js documentation:

This file exposes a single global function, OCRAD which takes an image as an argument and returns the recognized text as a string. [...] The image argument can be a canvas element, a Context2D instance, or an instance of ImageData.

Try this:

$(document).ready(function() {
    var$img = $('#image');

    var context = document.createElement('canvas').getContext('2d');
    context.drawImage($img[0], 0, 0);

    var imageData = context.getImageData(0, 0, $img.width(), $img.height());

    varstring = OCRAD(imageData);
    alert(string);
});

But you may have to put width and height attributes on your <img> element in order for this to work.

---

If you attempt to pass an <img> element to the OCRAD() function, you will get the following error:

uncaught exception: 5264272 - Exception catching is disabled, this exception cannot be caught. Compile with -s DISABLE_EXCEPTION_CATCHING=0 or DISABLE_EXCEPTION_CATCHING=2 to catch.

If you attempt to pass a jQuery object to the OCRAD() function, you will get the following error:

Error: invalid arguments

---

Note: Because of the Same Origin Policy, the call to context.getImageData() will throw a SecurityError if the URL for the image does not have the same domain as the page it is on.