< canvas>上的JavaScript文本识别和OCR [英] JavaScript text recognition and OCR on <canvas>

问题描述

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

I found a web application that recognizes handwritten math equations:

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

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

I would like to know if someone knows an app or a tutorial or an open source project that implements this mechanism, because getting it from this webapp is really complex.

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

Note: I just need the equation drawn in the canvas to be translated in an input text box that's all.

推荐答案

Google Cloud Vision 是一种非常准确的OCR服务，每月最多可提供1000个请求。它也可以通过 REST API 轻松使用。在下面的代码段中，困难的部分是从用户处获取图像并在Base64中对其进行编码。

Google Cloud Vision is a very accurate OCR service, and it's free for up to 1000 requests per month. It's also easy to use via its REST API. In the snippet below, the hard part is getting an image from the user and encoding it in 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/*">

这篇关于< canvas>上的JavaScript文本识别和OCR的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！