使用HTML5画布的OCR

Question

I'm a complete newbee to HTML5 and Javascript. I'm trying to make this simple app in HTML5 where a user can draw any alphabet on the canvas and the alphabet gets recognized using ocrad.js. However, upon executing this script, no matter what alphabet i draw, the output is always the alphabet 'I'. My guess is that an empty canvas is being passed as an argument to OCRAD or there is an error in linking ocrad.js .

I'm not even sure, how to include the ocrad API as 'src' as i'm completely new to Javascript. Here's what i have written so far.

<canvas id="myCanvas" width="275" height="400" onmouseup="release()" onmousedown="lc=1" onmousemove="Draw(event)" onclick="putPoint(event)" style="border:1px solid #000000;">
</canvas>

<div id="buttons">
    <input type="button" id="clear" value="Clear">
</div>

<div id="buttons">
    <input type="button" id="recognize" value="Recognize">
</div>

<script src="ocrad.js/ocrad.js"></script>
<script type="text/javascript"> 
    var cnv = document.getElementById('myCanvas')
    var ctx = cnv.getContext('2d')

    var lc=0
    var prX=-1
    var prY=-1
    var dot= ctx.createImageData(2,2)
    for (i=0; i<dot.data.length; i+=4){
        dot.data[i+0]=0
        dot.data[i+1]=160
        dot.data[i+2]=230
        dot.data[i+3]=255
    }

    document.getElementById('clear').addEventListener('click', function() {
        ctx.clearRect(0, 0, cnv.width, cnv.height);
    }, false);

    function release(){
        lc=0
        prX=-1
    }

    function putPoint(event){
            var bb, x, y
            bb = cnv.getBoundingClientRect()
            x = (event.clientX-bb.left) * (cnv.width/bb.width)
            y = (event.clientY-bb.top) * (cnv.height/bb.height)
            ctx.putImageData(dot,x,y)
    }

    function Draw(event){
        if(lc==1){
            var bb, x, y
            bb = cnv.getBoundingClientRect()
            x = (event.clientX-bb.left) * (cnv.width/bb.width)
            y = (event.clientY-bb.top) * (cnv.height/bb.height)
            if (prX!=-1){
                ctx.beginPath()
                ctx.moveTo(prX,prY)
                ctx.lineTo(x,y)
                ctx.lineWidth=10
                ctx.closePath()
                ctx.strokeStyle='rgb(0,0,0)'
                ctx.stroke()
            }
            prX=x
            prY=y
        }
    }

    document.getElementById('recognize').addEventListener('click', function() {
        var string = OCRAD(cnv)
        alert(string)

    });

</script>

Any help in fixing this is appreciated. Thank You.

Answer 1

There is some strange bug in your code or in library, here is another working example, that should help:

 var c = document.getElementById('c'), o = c.getContext('2d'); function reset_canvas() { o.fillStyle = 'white' o.fillRect(0, 0, c.width, c.height) o.fillStyle = 'black' } var drag = false, lastX, lastY; c.onmousedown = function(e) { drag = true; lastX = 0; lastY = 0; e.preventDefault(); c.onmousemove(e) } c.onmouseup = function(e) { drag = false; e.preventDefault(); runOCR() } c.onmousemove = function(e) { e.preventDefault() var rect = c.getBoundingClientRect(); var r = 5; function dot(x, y) { o.beginPath() o.moveTo(x + r, y) o.arc(x, y, r, 0, Math.PI * 2) o.fill() } if (drag) { var x = e.clientX - rect.left, y = e.clientY - rect.top; if (lastX && lastY) { var dx = x - lastX, dy = y - lastY; var d = Math.sqrt(dx * dx + dy * dy); for (var i = 1; i < d; i += 2) { dot(lastX + dx / d * i, lastY + dy / d * i) } } dot(x, y) lastX = x; lastY = y; } } document.body.ondragover = function() { document.body.className = 'dragging'; return false } document.body.ondragend = function() { document.body.className = ''; return false } document.body.onclick = function() { document.body.className = ''; } document.body.ondrop = function(e) { e.preventDefault(); document.body.className = ''; picked_file(e.dataTransfer.files[0]); return false; } function open_picker() { var e = document.createEvent("MouseEvents"); e.initEvent('click', true, true); document.getElementById('picker').dispatchEvent(e); } function runOCR(image_data, raw_feed) { var response = OCRAD(c); if ('innerText' in document.getElementById("text")) { document.getElementById("text").innerText = response; } else { document.getElementById("text").textContent = response; } } reset_canvas() 

 <script src="http://antimatter15.com/ocrad.js/ocrad.js"></script> <div id="demo"> <canvas style="border:1px solid grey;" id='c' class="" width="300" height="150"></canvas> <div class="output"> <div id="output"> <div id="text"></div> <span id="timing"></span> </div> </div> </div>