使用 HTML5 画布的 OCR

Question

我是 HTML5 和 Javascript 的新手。我正在尝试在 HTML5 中制作这个简单的应用程序，用户可以在画布上绘制任何字母，并使用 ocrad.js 识别字母。但是，在执行此脚本时，无论我绘制什么字母，输出始终是字母“I”。我的猜测是空画布作为参数传递给 OCRAD 或链接 ocrad.js 时出错。

我什至不确定如何将 ocrad API 包含为“src”，因为我对 Javascript 完全陌生。这是我到目前为止写的内容。

<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>

对于解决此问题的任何帮助表示赞赏。谢谢。

Answer 1

您的代码或库中存在一些奇怪的错误，这是另一个工作示例，应该会有所帮助：

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>