非常简单 javascript ocr on black text white background

Question

我有一个超级简单的 OCR 需求。

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

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

我想创建一个非常简单的 OCR 来读取这些。我想到了这个方法：

我以同样的方式为消息生成图像。我应该为每个角色生成一个图像。然后我仔细检查并尝试将每个字符图像与 canvas 中的黑色出现匹配。这是正确的做法吗？

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

Answer 1

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

我不想让你放弃解决方案，但不要将 OCR 用于你的目的

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

将您的信息放在图片的文件名中。

Answer 2

好的，再试几次...

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

你可以试试这个"home brewed" OCR解决方案...但我怀疑它的有效性。

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

找到第一个字母后，返回步骤#1 并仅使用不包括第一个字母的偏移量绘制消息文本。

Answer 3

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

下载gocr.js
决定是从 WebWorker 还是主线程

工人

在工人中输入这段代码：

importScripts(gocr.js)
GOCR(aImgData)

aImgData 所在的位置，拍摄图像，加载它，将其绘制到 canvas，然后将数据发送给 webworker。（参见主线程方法）

主线程

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

非常简单 javascript ocr on black text white background

Very simple javascript ocr on black text white background

html

javascript

ocr

canvas

工人

主线程