JavaScript文本识别和<canvas> </canvas>上的OCR

时间:2013-03-05 16:33:05

标签: javascript html5-canvas ocr text-recognition

我发现了一个识别手写数学方程式的Web应用程序:

  

http://webdemo.visionobjects.com/equation.html?locale=default

我想知道是否有人知道应用程序或教程或实现此机制的开源项目,因为从此webapp获取它非常复杂。

注意:我只需要将画布中绘制的等式转换为输入文本框即可。

3 个答案:

答案 0 :(得分:8)

答案 1 :(得分:7)

Google Cloud Vision是一种非常准确的OCR服务,它是free for up to 1000 requests per month。它也可以通过REST API轻松使用。在下面的代码片段中,困难的部分是从用户处获取图像并在Base64中对其进行编码。

var GCVUrl = 'https://vision.googleapis.com/v1/images:annotate?key=XXX';
// Enable the Cloud Vision API and get a key - see
// https://cloud.google.com/vision/docs/quickstart
var input = document.querySelector('input[type=file]');
var fileReader = new FileReader();

input.onchange = function (event) {

  var file = event.target.files[0];

  fileReader.onload = function(fileLoadedEvent) {
    var GCVRequest = {
      requests: [{
        image: {
          content: fileLoadedEvent.target.result.split(',')[1]
          // must discard `data:image/png;base64,`
        },  
        features: [{type: 'TEXT_DETECTION'}]
      }]
    };

    $.ajax({
      type: 'POST',
      url: GCVUrl,
      dataType: 'json',
      contentType: 'application/json',
      data: JSON.stringify(GCVRequest),
      success: function (data) {
        var texts;
        if (texts = data.responses[0].textAnnotations) {
          alert(texts[0].description);
        } else {
          alert('No text was recognized');
        }
      },
      error: function(jqXhr, textStatus, error) {
        alert('XHR error: ' + jqXhr.responseJSON.error.message);
      }
    });

  };

  fileReader.readAsDataURL(file);

};
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<input type="file" accept="image/*">

答案 2 :(得分:3)

有几个众所周知的OCR库的emscripten.js端口,例如OCRAD.jsGOCR