html5实现手写签名板，用于电子文档签名

html5实现手写签名板，点击保存签名，读取画布base64编码，转为二进制保存到数据库(直接保存base64字符串到数据库也行，我这边由于业务场景存储二进制方便其他项目组使用)，用于电子文档签名

 

效果如下

 

 

html代码，直接使用H5自带的canvas，无需引入js

    
    
    
    
    







    您的浏览器不支持canvas技术,请升级浏览器!


    清空签名板
    保存签名

后台存储到数据库代码

 public  void submitSign(Map module, String tjbh, String signType, String pictrue) throws Exception{
        Session session=null;
        Connection conn=null;
        PreparedStatement ps=null;
        try{
            session=sessionFactory.openSession();
            conn=session.connection();

            String base64Str=pictrue.replace("data:image/png;base64,","");
           // System.out.println("base64Str:"+base64Str);

            BASE64Decoder decoder = new sun.misc.BASE64Decoder();
            byte[] byte_1= decoder.decodeBuffer(base64Str);
            String deleteSql="delete from TJ_SIGN_PHOTO   where TJBH=? and  SIGNTYPE=?   ";
            session.createSQLQuery(deleteSql).setParameter(0,tjbh).setParameter(1,signType).executeUpdate();

            SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

            String insertSql="insert into TJ_SIGN_PHOTO(TJBH,SIGNTYPE,OPDATE,PICTURE)VALUES(?,?,?,?)";
            ps=conn.prepareStatement(insertSql);
            ps.setString(1,tjbh);
            ps.setString(2,signType);
            ps.setString(3,sdf.format(new Date()));
            ps.setBytes(4,byte_1);
            ps.execute();

            module.put("code","200");
            module.put("message","操作成功!");
        }finally {
            if(ps!=null){
                try {
                ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(conn!=null){
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(session!=null){
                session.close();
            }
        }
    }