做的检测系统,为了把结果打印到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的。
#####先说说思路
- 做好上传
- canvas拿到图片,处理成黑白
- 之后通过文字识别把正确的签名之外的部分去掉
- 重新做透明背景或白色背景
#####再分享找到的例子
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/
#####最后把结果分享给大家
#####聊聊解决思路,看看解决代码