html5配合canvas签名提取

做的检测系统,为了把结果打印到A4纸上时免去N个人的手写签名。

省事做法是把手写签名拍照交给设计处理,之后放到系统上 打印或预览时把签名放上。

像下面这图

签名原图

这样做的问题不言而喻,任何修改都要交给设计再次处理。要是卖出去软件,维护起来太麻烦了。

为了把人工处理签名转为系统处理,想到两种解决方式。

一是在系统上做个写字板,每个人在写字板上写自己的签名。

二是把上面的签名原图上传系统,系统通过canvas把个人签名抠出来。

一的做法是很多OA的传统做法吧,因为网上搜索canvas制作web写字板时,大家都说为了解决签名的需求而做的写字板。

在这里分享几个搜到的写字板项目成果,觉得很不错。

最喜欢的一个 https://github.com/szimek/signature_pad

这个也很酷 https://willowsystems.github.io/jSignature/

还有这个 http://www.oschina.net/code/snippet_2352644_49974

这个是做水印的 http://www.sjsjw.com/101/005918MYM002927/

觉得这种做法其实很鸡肋,因为通过鼠标去写签名,跟笔在纸上写的太不一样了,一旦有纠纷问题,文字鉴别都鉴别不出来。。。。只能本人确定是不是自己的签名,看看效果

画板签名

还有种方法就是通过电脑外设画板来写签名,俺没有,也没尝试,也不知道效果如何。只是觉得并没有方便多少。

所以,在这里就努力往第二种解决方式努力吧,好在网上搜到了很多牛掰的例子,搞定签名还是so easy的。

#####先说说思路

  1. 做好上传
  2. canvas拿到图片,处理成黑白
  3. 之后通过文字识别把正确的签名之外的部分去掉
  4. 重新做透明背景或白色背景

#####再分享找到的例子

canvas+html5做的人脸识别 http://wesbos.com/html5-video-face-detection-canvas-javascript/

不知道是啥 http://techslides.com/object-detection-with-html5-getusermedia

图片处理 http://www.html5rocks.com/en/tutorials/canvas/imagefilters/

#####最后把结果分享给大家
处理后的结果

#####聊聊解决思路,看看解决代码