插件描述:jQuery手写签名插件jSignature ,实现H5APP、网页 手写签名涂鸦 保存图片
代码实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>My JSP 'index.jsp' starting page</title> <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript" src="jSignature.min.js"></script> <style type="text/css"> #signature{ border: 1px solid red; } </style> <script type="text/javascript"> //初始化画布 $(document).ready(function(){ $("#signature").jSignature({height:300,color:"#000",lineWidth:4}); }) //重置画布 function clearSig(){ $("#signature").jSignature("clear"); } //将画布内容显示到IMG function importImg(){ var sig=$("#signature"); $("#img").attr("src","data:"+sig.jSignature('getData')); } </script> </head> <body> <button onclick="clearSig()">重置</button> <button onclick="importImg()">获取</button> <div id="signature"></div> <img id="img"> </body>
</html>
注意:加上jquery-1.11.1.min.js、jSignature.min.js
疑问1,怎么去除签字版下面的黑线
在jSignature.min.js中修改decor-color属性,改为你想要的颜色。
疑问2,怎么判断是否签名
if( $("#signature").jSignature('getData', 'native').length == 0){alert("请先进行签名");return;
}
疑问3,怎么把图片进行存取
一般有两种方法存到数据库:一种是将图片保存的路径存储到数据库;另一种是将图片以二进制数据流的形式直接写入数据库字段中。
Base64
主要不是加密,它主要的用途是把这里写链接内容一些二进制数转成普通字符用于网络传输。由于一些二进制字符在传输协议中属于控制字符,不能直接传送需要转换一下。
1、转化为base64流进行存放。
截取data:image/png;base64,后面流传入后台存放到BLOB类型中。
byte[] b = Base64.decode(stream.toString());
2、前台展示
Base64.encode((byte[]) stream)
<img src='data:image/png;base64,"+stream+"'/>