handwriting.js

A simple API access to the incredible handwriting recognition of Google IME

Demo

See here

Usage

Include src

    <script type="text/javascript" src="handwriting.js"></script>

Capture trace

The captured trace looks like:

var trace = 
    [   //the trace is an array of strokes
        [   //a stroke is an array of pairs of captured (x, y) coordinates
            [300, 310, 320, 330, 340], //x coordinate
            [320, 320, 320, 320, 320]  //y coordinate
            //each pair of (x, y) coordinates represents one sampling point 
        ],
        [
             [320, 320, 320, 320, 320],
             [300, 310, 320, 330, 340]
        ]
    ];

For example, the trace above is composed of two strokes,

(300, 320), (310, 320), (320, 320), (330, 320), (340, 320)

and

(320, 300), (320, 310), (320, 320), (320, 330), (320, 340),

which is produced by writing "十".

Manage options

options argument is an optional object of following fields:

var options = {
    width : 800,         //int, width of the writing area, default: undefined
    height : 800,        //int, height of the writing area, default: undefined
    language : "zh_TW",  //string, language of input trace, default: "zh_TW"
    numOfWords : 1,      //int, number of words of input trace, default: undefined
    numOfReturn : 5,     //int, number of maximum returned results, default: undefined
};

Under most conditions, only language field is required. However, specifying writing area width and height helps in improving precision.

See Language Support

Specify callback function

The recognition function will invoke the callback function argument passed in after recognition process. The callback function should accept two arguments as shown below:

var callback = function(result, err){
    if(err) throw err;
    else console.log(result);	
};

The returned result will be an array of string, for example, the trace above (with other options set to default) generates:

[ "十", "+", "一|", "一1", "一个", "-|", "一'", "-1", "一．", "-．" ]

If no error occurred, err will be undefined.

Call recognition function

bound on a button as an example:

<button onclick="handwriting.recognize(trace, options, callback);">Recognize</button>

Fully functional library

Include handwriting.canvas.js instead of handwriting.js if you want to use the pre-implemented canvas behaviors.

<script type="text/javascript" src="./handwriting.canvas.js"></script>

Usage

Declare html canvas as handwriting.Canvas object by passing that canvas element to the constructor:

<canvas id="can" width="400" height="400" style="border: 2px solid; cursor: crosshair;"></canvas>

<script>
    var can1 = new handwriting.Canvas(document.getElementById("can"));
</script>

Now trace is automatically captured, stored in the object, and shown on the given element (either by mouse dragging or touch).

APIs

The captured trace and other fields are independent through objects, so call the following functions exactly on which object you wish to take action to:

    //Set callback function
    can1.setCallBack(function(data, err) {
        if(err) throw err;
        else console.log(data);
    });

    //Set line width shown on the canvas element (default: 3)
    can1.setLineWidth(5);

    //Set options
    can1.setOptions(
        {
            language: "ja",
            numOfReturn: 3
        }
    );

    //recognize captured trace
    can1.recognize();
	
    //Clear canvas, captured trace, and stored steps
    can1.erase();

undo and redo functionality

This feature is achieved by saving every stroke in object, however, such attempt consumes relatively higher memory, so undo and redo functionalities are disabled by default, to change the availability, simply call :

    //only turn on undo functionality
    can1.set_Undo_Redo(true, false);

    //turn on both functionalities
    can1.set_Undo_Redo(true, true);

note that redo functionality can be turned on only if undo functionality is also turned on

    //calling any of the two functions below leads to the same consequence: turn off both undo, redo functionality, and clear stored steps (if any) 
    can1.set_Undo_Redo(false, false);
    can1.set_Undo_Redo(false, true);

If the functionalities are turned on, the following functions will work, otherwise, nothing will happen:

    can1.undo();
    //set canvas and stored trace to the last state (stroke)

    can1.redo();
    //if there are undo records, return to the state of the next stored step

Note that, even included handwriting.canvas.js now, the previous way of calling recognition still works :

    handwriting.recognize(trace, options, callback);

so that you can take advantage of the handwriting.canvas object, while not changing previous code.

Supported Language

Reference

Note: Google provides a supported language list, but not the language codes. The following codes are collected from the Internet and only zh_TW, en, ja are tested. If you notice weird recognition results then maybe the language code is wrong.

License

MIT licensed