非常简单的javascript ocr在黑文本白色背景

Question

我非常需要OCR。

我的应用程序允许从文本创建图像。它非常简单。人们选择字体，粗体或不粗体。

所以他们得到这样的输出，忽略边界：

我想创建一个非常简单的OCR来阅读这​​些内容。我想到了这种方法：

以同样的方式为消息生成图像。我应该为每个角色生成一个图像。然后我尝试将每个角色图像与画布中的黑色遮挡物相匹配。这是正确的做法吗？

我用于将元素绘制到图像的方法是此复制粘贴示例：MDN :: Drawing DOM objects into a canvas

Answer 1

OCR总是很复杂且往往不准确。

我讨厌让你摆脱解决方案，但不要将OCR用于你的目的

简单有效的解决方案......

将您的信息添加到图片的文件名中。

Answer 2

好的，还有几次尝试......

另一种比OCR更简单的方法：使用隐写术将文字信息作为图片本身的一部分嵌入。这是一个使用图片的Alpha通道存储文本的脚本：http://www.peter-eigenschink.at/projects/steganographyjs/index.html

你可以试试这个＆＃34;自酿的＆＃34; OCR解决方案 ......但我对其有效性表示怀疑。

1. 使用context.drawImage的裁剪形式在画布上仅绘制图像的消息文本区域。
2. 使用context.getImageData抓取像素信息。
3. 从左侧开始检查每个垂直列，直到找到不透明的像素（这是第一个字母的左侧）。
4. 继续检查每个垂直列，直到找到包含所有透明像素的列（这是第一个字母的右侧）。
5. 调整第二个画布的大小以准确包含已发现的字母，drawImage只调整第二个画布的第一个字母。
6. 设置globalCompositeOperation='destination-out'，以便任何新图形都会删除任何新图纸。旧的重叠。
7. fillText这封信＆＃34; A＆＃34;在第二个画布上。
8. 使用context.getImageData抓取第二个画布上的像素信息。
9. 计算第二个画布上的不透明像素。
10. 如果不透明的像素数很高，那么它们可能与字母A不匹配，因此请使用字母B重复步骤5-9。
11. 如果不透明像素数量较少，则您可能找到了字母A.
12. 如果不透明像素数为中低，您可能已找到字母A但是2 A未完全对齐。重复步骤5-9，但将步骤＃7中的A水平或垂直偏移1个像素。继续偏移A in 1像素偏移，并查看不透明像素数是否变低。
13. 如果步骤＃12没有产生低像素数，请继续使用字母B，C等，并重复步骤5-9。

当您发现第一个字母后，请返回步骤＃1，仅绘制带有排除第一个字母的偏移量的消息文本。

Answer 3

找到解决方案 - GOCR.js - https://github.com/antimatter15/gocr.js/tree/d820e0651cf819e9649a837d83125724a2c1cc37

1. 下载gocr.js
2. 决定是否要从WebWorker或mainthread
转发

工人

在工作人员中输入此代码：

importScripts(gocr.js)
GOCR(aImgData)

其中aImgData是，拍摄图像，加载图像，将其绘制到画布，然后将数据发送给webworker。 （参见mainthread方法）

mainthread

<script src="gocr.js">
<script>
var img = new Image()
img.onerror = function() {
    console.error('failed')
}
img.onload = function() {

    var can = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
    can.width = img.width;
    can.height = img.height;
    var ctx = can.getContext('2d')
    ctx.drawImage(img, 0, 0)
   // to use this in a worker, do ctx.getImageData(0, 0, img.width, img.height), then transfer the image data to the WebWorker
    var text = GOCR(can);

}
</script>