在画布中阅读文本，在画布

Question

我正在处理流程。我用过vis库来显示流程。它显示画布中的流量。

流量很长，并且根据用户输入动态生成，因此我在画布内提供了滚动 因此，要进入特定步骤，用户必须向下滚动。我想在画布中提供搜索功能，使其更加用户友好 有没有办法在Canvas中提供搜索功能？

Answer 1

您是指对现有画布内容进行字符识别（如图片中所示）吗？

修改vis库以便为每个步骤发出{x:,y:,text:}个对象会容易得多。

字符识别是可​​能的但不实用。

我做了一个简单的简单概念验证演示，其中：

• 已知font-size和font-face。
• 除文字外，背景是透明的。
• 每个角色都被透明度所包围。

这个过程是这样的：

1. fillText随机＆＃34;未知＆＃34; ＆＃34; main＆＃34;画布。
2. 在主画布上，找到左上角的透明包围的不透明像素。这组像素是未知字符。
3. 仅在第二个画布上复制该未知字符。
4. 将合成模式设置为destination-out。
5. 画一个＆＃39; A＆＃39;在未知角色的第二个画布上。合成模式将擦除未知字符的不透明像素。
6. 计算第二个画布上剩余的不透明像素。
7. 如果有＆＃34;很少＆＃34;然后剩下不透明的像素＆＃39; A＆＃39;可能是未知的角色。
8. 如果有＆＃34;很多＆＃34;然后剩下不透明的像素＆＃39; A＆＃39;可能不是未知的角色。因此，使用＆＃39; B＆＃39;重复步骤＃3 +字符（然后是＆＃39; C，D等＆＃39;）。

有助于识别的改进：

• 删除原始主画布上以及每个＆＃39; A，B，......上的所有消除锯齿功能。字符过度绘制。

• 绘制＆＃39; A，B，...＆＃39;删除原始未知字符，画出“A＆＃39;多次，垂直，水平和对角线偏移1个像素。抵消：[x+0,y+0], [x-1,y], [x+1,y], [x,y-1], [x,y+1], [x-1,y-1], [x-1,y+1], [x+1,y-1], [x+1,y+1]。

<强>结果

愚蠢的事情运作得相当好 - 他用真正的自我惊喜说道！ ：-O

使用36像素Verdana字体，代码识别!到~（大多数非Unicode字符）中的所有字符。

但是......双引号字符未被识别，因为它是一个分为两部分的Verdana字符。在视觉上，双引号看起来像是由空格分隔的两个单引号。由于透明空间，步骤＃​​2找到了引用的左侧部分而不是右侧部分。

这不是一个有效的OCR系统......它几乎不是一个概念验证!!

• 字体大小＆amp;必须完全知道font-face。由于浏览器（甚至是浏览器版本）的字体可能会有所不同，因此该技术可能不会在浏览器中运行良好。

• 识别仅适用于在html5画布上书写的文本。如果给出纸质图像，那么＆＃34;噪音＆＃34;在论文中可能会导致技术失败。

然而，它是一个相当好的模式匹配算法的基础，其他线索有助于识别过程。