jSignature开发实例

最新推荐文章于 2024-09-22 20:59:23 发布

喜剧新人

最新推荐文章于 2024-09-22 20:59:23 发布

阅读量8.9k

点赞数 6

分类专栏： jSignature 文章标签： jsp签名 jSignature实例

本文链接：https://blog.csdn.net/farxix/article/details/81505140

版权

jSignature 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

插件描述：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+"'/>

喜剧新人

关注

6
点赞
踩
17

收藏

觉得还不错? 一键收藏
10
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录