<canvas> 上的 JavaScript 文本识别和 OCR
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15229168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript text recognition and OCR on <canvas>
提问by Elie
I found a web application that recognizes handwritten math equations:
我找到了一个可以识别手写数学方程的网络应用程序：
http://webdemo.visionobjects.com/equation.html?locale=default
http://webdemo.visionobjects.com/equation.html?locale=default
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.
我想知道是否有人知道实现这种机制的应用程序或教程或开源项目，因为从这个webapp获取它真的很复杂。
Note:I just need the equation drawn in the canvas to be translated in an input text box that's all.
注意：我只需要在画布中绘制的方程在输入文本框中进行翻译即可。
回答by Hyman burridge
回答by Dan Dascalescu
Google Cloud Visionis 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.
Google Cloud Vision是一项非常准确的 OCR 服务，每月最多可免费处理 1000 个请求。通过其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/*">