使用HTML5和iPad捕获签名

有人知道怎么做吗？您会使用画布对象、svg、jQuery等吗？

带有一些JavaScript的画布元素将非常有用

---

事实上，（一个jQuery插件）已经实现了这一点。

这里是我刚刚实现的。在我的iPhone上很适合我。也可以在桌面浏览器中使用正常的鼠标事件。

也许最好的两种浏览器技术是Canvas，使用Flash作为备份

我们尝试在IE上使用VML作为画布的备份，但它比Flash慢得多。SVG比其他的都慢

---

对于jSignature（），我们使用Canvas作为主要对象，对于IE8及以下版本，我们可以回退到基于Flash的Canvas仿真器（FlashCanvas）。Id'say对我们来说非常有效。

这里是另一个基于画布的版本，具有可变宽度（基于绘制速度）曲线：demo at和code at

---

另一个开源签名字段是使用Sketch.js注册的jQuery插件。

已经列出的选项非常好，但是这里有一些关于这个主题的更多内容，我已经研究并遇到了。

1）
2）
3）

和往常一样，您可能希望将画布保存到图像：


祝你好运和快乐签名

@szimek（选择答案）为那些想要拥有麻省理工学院许可证的全功能模块的人提供了一个完善的解决方案@heycam有一个更简单的解决方案，不需要库或插件，没有许可证，并且可以轻松定制；所有这些都使它更适合我的需要。这篇文章试图解释他的解决方案到底是如何工作的

基本工作流程：

创建一个功能空白的

svg

，以包含签名

在容器内保留一个

path

元素

svg

使用触摸事件（

touchstart

、

touchmove

、

touchend

）让用户使用触摸输入绘制签名

使用鼠标事件（

mousedown

，

mousemove

，

mouseup

，

mouseout

）让用户使用鼠标输入绘制签名

在每个事件中，检测输入类型（触摸、鼠标）以获取用户正在绘制的路径的X、Y坐标

将每个路径附加到

path

元素的

d

属性（路径坐标），以便向用户显示

添加一个helper函数来输出签名路径（

path.d

），它只是一个

字符串

，您可以稍后插入

path.d

，以恢复签名

添加一个helper函数以清除

path.d

值

以下是@heycam的解决方案，它是一个可运行的代码片段：

//初始化
设r=document.getElementById（'r'），
p=document.getElementById（'p'），
签名路径=“”，
isDown=false，
svg=document.getElementById（'sig_panel'），
b_show=document.getElementById（'show'），
b_clear=document.getElementById（'clear'），
pathdata=document.getElementById（'pathdata'）；
//绘图功能
功能ISTOUCHENT（e）{
返回e.type.match（/^touch/）；
}
函数getCoords（e）{
如果（i）事件（e））{
返回e.targetTouches[0].clientX+'，'+e.targetTouches[0].clientY；
}
返回e.clientX+'，'+e.clientY；
}
功能下降（e）{
签名路径+='M'+getCoords（e）+''；
p、 setAttribute（'d'，signaturePath）；
isDown=真；
if（isTouchEvent（e））e.preventDefault（）；
}
功能移动（e）{
如果（isDown）{
签名路径+='L'+getCoords（e）+''；
p、 setAttribute（'d'，signaturePath）；
}
if（isTouchEvent（e））e.preventDefault（）；
}
功能启动（e）{
isDown=假；
if（isTouchEvent（e））e.preventDefault（）；
}
//输入处理程序
r、 addEventListener（'touchstart'，down，false）；
r、 addEventListener（'touchmove'，move，false）；
r、 addEventListener（'touchend'，up，false）；
r、 addEventListener（'mousedown'，down，false）；
r、 addEventListener（'mousemove'，move，false）；
r、 addEventListener（'mouseup'，up，false）；
r、 addEventListener（'mouseout'，up，false）；
//辅助函数
函数签名（）{
pathdata.textContent=''；
签名路径=“”；
p、 setAttribute（'d'，''）；
}
函数getSignature（）{
pathdata.textContent=signaturePath；
返回签名路径；
}
//按钮处理程序
b_show.addEventListener（'click'，getSignature）；
b_clear.addEventListener（'点击'，清除签名）
svg{
边缘：.5em；
边框：1px纯色灰色；
边界半径：.5em；
}
.flex{
显示器：flex；
}
钮扣{
边缘：.5em；
}
#路径数据{
字体系列：monospace；
背景：ddd；
填充：1em；
边缘：1em.5em；
}

显示符号路径数据
清晰的签名
我很惊讶这个插件有多漂亮。太完美了！谢谢分享！不幸的是，我发现这个插件很难使用。所有的演示都非常具体，应用起来也很棘手。绝对像其他签名板方法更好：几乎没有文档，我能够让它工作…这真的很好。。。我喜欢它的平滑效果。我见过的最好的。提前谢谢，我见过的最好的js签名库。不知道为什么这个答案只有3票。我喜欢它不依赖于其他js库以及它看起来有多好。关于使用它的一个注意事项帮助了我：在画布上添加一个边框，这样你就可以看到它是如何调整的。还要注意的是，css对画布的更改会做一些疯狂的事情，因此，如果这失控，只需在画布元素中指定一个高度和宽度。Jake，您认为自述文件中提供的文档中到底缺少什么？我愿意接受如何改进的建议。我道歉。我认为你的文件实际上已经足够了。在我意识到这是多么容易使用之前，它似乎是有限的。我在一个表单中完全实现了它，存储在数据库中，并在不到一个小时的时间内检索回页面。我想，我是在将它与使用起来要复杂得多的库进行比较，就像上面选择的答案一样。我以前没有使用过数据URI，但它