使用HTML5和iPad捕获签名


Answers:


313

这是另一个具有可变宽度(基于绘制速度)曲线的基于画布的版本:位于http://szimek.github.io/signature_pad的演示和位于https://github.com/szimek/signature_pad的代码。

签名样本


1
预先感谢,我见过的最好的js签名库。不知道为什么这个答案只有3票。github.com/szimek/signature_pad
VAdaihiep

3
我喜欢这不依赖于其他js库及其外观。使用它的一个注意事项对我有所帮助:在画​​布上添加边框,以便您查看其调整方式。还要注意,对CSS进行的CSS更改会做一些疯狂的事情,因此,如果这不受控制,只需在canvas元素中指定高度和宽度即可。
Brian McGinity 2013年

3
杰克,您认为README文件中提供的文档中到底缺少什么?我愿意提出改进建议。
szimek

7
我道歉。我认为您的文件确实足够。直到我意识到这是多么容易使用之前,它似乎一直很有限。我以某种形式完全实现了它,将其存储在数据库中并在不到一个小时的时间内检索到页面。我想,我正在将它与使用起来更加复杂的库(例如上面选择的答案)进行比较。我以前没有使用过数据URI,但这是处理数据存储的一种绝妙的方法。因此,我只需要适应这些条件,然后在数据库中存储和检索就是如此……容易……哇。再次感谢!
杰克

1
@RonaldinhoLearnCoding签出README文件-列出所有可能的选项。您正在寻找的一种叫做“ penColor”。
szimek

60

具有某些JavaScript的canvas元素会很好用。

实际上,Signature Pad(一个jQuery插件)已经实现了此功能。


2
我很惊讶这个插件有多漂亮。
Gourneau'3

那么完美!感谢分享!
sagescrub

我发现这个插件确实很难使用。所有演示都非常具体且难以应用。绝对像其他签名板方法一样好:stackoverflow.com/a/17200715/76672几乎没有文档,我能够使它工作起来……
Jake


12

可能最好的两种浏览器技术是Canvas,以Flash作为备份。

我们在IE上尝试使用VML作为Canvas的备份,但是它比Flash慢得多。SVG慢于所有其他。

使用jSignature(http://willowsystems.github.com/jSignature/),我们使用Canvas作为主要对象,并回退到IE8及以下版本的基于Flash的Canvas仿真器(FlashCanvas)。同上说对我们非常有效。


这真的很好...我喜欢它的平滑效果。我见过的最好的。
卡姆登·

2

已经列出的选项非常好,但是这里有一些我已经研究过并且遇到过的话题。

1)http://perfectionkills.com/exploring-canvas-drawing-techniques/
2)http://mcc.id.au/2010/signature.html
3)https://zipso.net/a-simple-touchscreen -sketchpad-using-javascript-and-html5 /

和往常一样,您可能希望将画布保存到图像:
http : //www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

祝你好运,签名愉快


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.