在canvas中读取文本，在canvas中标识文本的位置
我正在研究流程。 我用过vis库来显示流程。 它显示了canvas中的流程。
流程很长并且是根据用户输入动态生成的，所以我在canvas中提供了滚动。
因此，要进入特定步骤，用户必须向下滚动。 我想在canvas中提供搜索function，使其更加用户友好。
有没有办法在Canvas中提供搜索function？
你的意思是现有canvas内容的字符识别（如你的图像）？
修改vis库以便为每个步骤发出{x:,y:,text:}对象会容易得多。
字符识别是可能的但不实用。
我做了一个简单的简单概念validation演示，其中：
- font-size和font-face是已知的。
- 除文本外，背景是透明的。
- 每个角色都被透明度所包围。
这个过程是这样的：
-
fillText在“主”canvas上随机显示“未知”字符。 - 在主canvas上，找到由透明度包围的左上角的不透明像素集。 这组像素是未知字符。
- 仅复制第二个canvas上的未知字符。
- 将合成模式设置为
destination-out。 - 在未知角色的第二个canvas上绘制一个“A”。 合成模式将擦除未知字符的不透明像素。
- 计算第二个canvas上剩余的不透明像素。
- 如果剩下“非常少”的不透明像素，则“A”可能是未知字符。
- 如果剩下“很多”不透明像素，则“A”可能不是未知字符。 因此，重复步骤＃3 +使用’B’字符（然后’C，D等’）。
有助于识别的改进：
-
删除原始主canvas上和过度绘制的每个“A，B，…”字符上的任何消除锯齿。
-
当绘制’A，B，…’以擦除原始未知字符时，垂直，水平和对角地以1像素偏移多次绘制’A’。 偏移：
[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系统……它几乎不是一个概念validation！
-
必须准确知道font-size和font-face。 由于浏览器（甚至是浏览器版本）之间的字体可能会有所不同，因此该技术在浏览器中可能无法正常工作。
-
识别仅适用于在html5canvas上书写的文本。 如果给出纸质图像，纸张中的“噪音”可能会导致技术失败。
然而，它是一个相当好的模式匹配算法的基础，其他线索有助于识别过程。