如何使用 HTML5 和 JS 捕获和识别用户签名？

Posted 2023-03-05

【中文标题】如何使用 HTML5 和 JS 捕获和识别用户签名？

【英文标题】：How can I capture and recognise user signatures using HTML5 and JS?

【发布时间】：2014-01-04 07:30:55

【问题描述】：

我希望允许用户使用画布输入他们的签名，然后通过将签名与一个或多个存储的签名版本进行匹配，使用图像识别来验证（在一定程度上）签名。

我可以从Capture Signature using html5 and iPad 看到，有一些很棒的用于捕获签名的库。

我也可以从Feature Extraction with javascript看到JavaScript中有图像处理库，这很好，因为我不想读取签名，我只想将它作为图像处理.

我不知道如何使用图像处理库来匹配或识别图像。我正在尝试在创新冲刺期间进行设计概念验证，因此实际上我没有时间进行大量推测性编码。事实上，如果没有成衣解决方案，我也会有兴趣将这些签名捕获小部件与在线图像识别服务配对使用，如果有图像等价于例如 http://www.skybiometry.com/Demo#recognition

[编辑]为了避免这被关闭为题外话，我可以澄清一下，我不是在询问人们最喜欢的图像匹配库，而是询问是否存在任何能够估计相似度的工具或库两个线性、草书、单色图像，并询问我必须采取哪些步骤（如果有）从现有的图像处理库（如 http://www.pixastic.com/lib/ 和 https://github.com/harthur/hog-descriptor）中获取图像比较。

【问题讨论】：

您能否对您的问题更具体一点，就目前而言，它太宽泛了。请注意，如果您要求对工具或库进行推荐，您的问题可能会因为离题而被关闭。

快速谷歌搜索发现这种签名验证软件是有代价的。考虑到所涉及的法律责任，我不建议自己尝试从头开始。祝你冲刺好运！

嗨@Roger - 我当然希望得到库或工具的推荐，我没有想到这可能是题外话。就更具体而言，我正在寻找与huddle.github.io/Resemble.js 具有类似 API 但侧重于比较签名而不是屏幕截图的东西。

See item 5 on this page 为什么它是题外话。我没有给你的建议，但你可能很幸运能在关门前得到一些 cmets/answers...

嗨@MarkE - 感谢您提供有关“签名验证”作为搜索词的提示。现在不记得我到底搜索了什么，但我主要是得到手写识别结果。至于责任问题，本项目研究的是使用签名识别作为辅助认证因素，而不是传统意义上的不可撤销地约束合同，所以我不认为这是一个特殊的问题。

【参考方案1】：

有点离题，但仍然相关，因为您提到了多种生物识别方法。

我们的问题：

我们在多家零售店设有经理。只有那些经理有权更改价格，并且该权限需要他们的 PIN 码才能执行。问题是经理们会很忙，当销售人员联系他们时，他们会将他们的 PIN 码提供给销售人员。安全违规。

我们的解决方案：

我们安装了指纹读取器，因此要求管理人员亲自执行那些只有他们有权执行的任务。不再有 PIN 码会导致安全违规。

与其他生物识别技术相比，指纹验证的误报和误报更少。它的实施成本低廉，并且可以适当地将行动与权威相匹配。这对我们来说是一个很好的解决方案。

【讨论】：

是的，这就是这里的想法。正如你所说，不是完全切题，但这是一个好故事，有人会觉得它很有帮助。

【参考方案2】：

感谢 Heather Arthur 的帮助，我可以将任何对此问题感兴趣的人指向 http://harthur.github.io/kittydar/，它准确地展示了从同一作者的 https://github.com/harthur/hog-descriptor 到功能性（猫科动物）图像识别系统需要哪些步骤.

来自https://github.com/harthur/kittydar 的工作原理部分：

Kittydar 首先将图像分割成许多“窗口”来测试 猫头的存在。对于每个窗口，kittydar 首先提取更多 来自图像数据的可处理数据。即，它计算 图像的方向梯度直方图描述符，使用 猪描述符库。该数据描述了方向 图像中的边缘（图像从亮变为暗的位置，并且 反之亦然）以及它们的强度。这个数据是一个向量 然后将数字输入到神经网络中，该神经网络给出一个数字 直方图数据代表猫的可能性从 0 到 1。

神经网络（其 JSON 位于此 repo 中）具有 已经用数千张猫头和它们的照片进行了预训练 直方图，以及成千上万的非猫。请参阅 repo 的 节点训练脚本。