This was made by Kevin Kwok (please follow me @antimatter15 or G+)
Ocrad.js Optical Character Recognition in JS
Ocrad.js is a pure-javascript version of Antonio Diaz Diaz's Ocrad project, automatically converted using Emscripten. It is a simple OCR (Optical Character Recognition) program that can convert scanned images of text back into text. Clocking in at about a megabyte of Javascript with no hefty training data dependencies (looking at you, Tesseract), it's on the lighter end of the spectrum.
Below is a simple demo, which should hopefully demonstrate the capabilities but will more likely show the substantial limitations of the library.
Hit the buttons on the left to reset the canvas or to randomly put some text in a random font. You can also try to draw something with your cursor.
Hit the buttons on the left to reset the canvas or to randomly put some text in a random font. You can also try to draw something with your cursor.
You can also drag and drop an image from your computer (JPEG, PNG, GIF, BMP, SVG, or NetPBM) to feed into the text recognizer or choose a file by clicking anywhere on this box.
The Ocrad.js API is really simple. First you need to include ocrad.js which is about 1MB in size.
<script src="ocrad.js"></script>
This file exposes a single global function, OCRAD which takes an image as an argument and returns the recognized text as a string.
var string = OCRAD(image);
alert(string);
The image argument can be a canvas element, a Context2D instance, or an instance of ImageData.
alert(string);
Ocrad.js also exposes all of the C library functions in addition to the extremely simple high level API covered in the last section. By calling OCRAD.version() you can find the current version string: 0.23-pre1, the latest pre-release version of the software available.
string OCRAD.version()
void OCRAD.write_file(string filename, Uint8Array PBM Image Data)
pointer OCRAD.open()
int OCRAD.close(pointer descriptor)
(and more!)
void OCRAD.write_file(string filename, Uint8Array PBM Image Data)
pointer OCRAD.open()
int OCRAD.close(pointer descriptor)
(and more!)
What about GOCR.js?
If you stumbled upon that page first, you might have realized that this entire page is a heinous act of plagiarism probably worthy of academic suspension— if not for the fact that I made that other page as well. It turns out that porting things with Emscripten is just so gosh-darned easy and addictive (don't tell the DEA I don't have an permscription). The neat thing about GOCR is that it compiles under Emscripten without any modifications, whereas Ocrad has some dependency issues.
Unlike GOCR.js, Ocrad.js is designed as a port of the library, rather than a wrapper around the executable. This means that processing subsequent images doesn't involve reinitializing an executable, so processing an image can be done in as little as an eighth of the time it takes GOCR.js to do the same (The fact that Ocrad is naturally faster than GOCR doesn't hurt this statistic either).
With a simple script which generates some text in some random font selected from the Google Font API, I ran a few hundred trials comparing the recognized text with the original text. The metric was a modified Levenshtein distance where the substitution cost for capitalization errors is 0.1. Of 485 trials, 175 trials ended up favoring GOCR.js, 184 favoring Ocrad.js, and 126 resulted in a tie. From playing with the draw tool, it seems that Ocrad is much more predictable and forgiving for minor alignment and orientation errors.
There have been some other comparisons on the performance of OCRAD versus GOCR. In this comparison done by Peter Selinger, Ocrad comes out just behind Tesseract. Another comparison by Andreas Gohr has GOCR performing better than Ocrad.
Accuracy wise, they're actually pretty close. It might be possible to create something which meshes together the outputs of both, picking whichever output matches a certain heuristic for quality. Ocrad does seem to vastly outperform GOCR when it comes to letter sketches on a canvas, so that's the one I'm focusing on here.
Aside from the relentless march of Atwood's law, there are legitimate applications which might benefit from client side OCR (I'd like to think that I'm currently working on one, and no, it's not solving the wavy squiggly letters blockading your attempts at building a spam empire). Arguably, it'd be best to go for porting the best possible open source OCR engine in existence (looking at you, Tesseract). Unlike OCRAD and GOCR, which interestingly seem to be powered by painstakingly written rules for each recognizable glyph, Tesseract uses neural networks and the ilk to learn features common to different letters (which means it's extensible and multilingual). When you include the training data, Tesseract is actually kind of massive — A functional Emscripten port would probably be at least 30 times the size of OCRAD.js!