前端需要引入:jSignature.min.js ,jquery-1.9.1.min.js

前端 部分写法:
body内加
<div id="signature"></div>

<img id='img' src="" alt="">
Js :
$(document).ready(function() {
var arguments = {
width: '100%',
height: '40%',
color:'#000',
"decor-color": "transparent",//去除默认画布上那条横线
lineWidth: '3'
};
$("#signature").jSignature(arguments);
});

//重写
function btnCleanUp(){
    $("#signature").jSignature("clear");
$("#img").attr("src", "");
}
//保存为图片
function btnGenerateImg() {
if( $("#signature").jSignature('getData', 'native').length === 0) {
alert("请签名后再保存图片!");
return;
}
var sig = $("#signature").jSignature('getData');
$("#img").attr("src", sig);
}
//上传到服务器
function btnUpload(){
if( $("#signature").jSignature('getData', 'native').length === 0) {
alert("请签名后再提交!");
return;
}
var datapair = $("#signature").jSignature("getData", "image");
$.ajax({
url:'https://xxxx/upload',
data:{"imgStr":datapair[1]},
type:'POST',
success:function (data){
alert(data);
},
error:function (data){}
});
}
java 后台实现:
@RequestMapping("/upload")
@ResponseBody // imgStr就是前台发送的data[1]
public String upload(HttpServletRequest request){
try{
String imgStr=request.getParameter("imgStr");
if(StringUtils.isBlank(imgStr)){
return new RespBody(RespBody.Status.ERROR, "未找到需要保存的图片内容");
}
// 文件名称
String s = PKGenerator.generateId();
String fileName = s + ".png";
// 获取路径
String ctxPath = "D:autograph/";
// 创建文件
File dirPath = new File(ctxPath);
if (!dirPath.exists()) {
dirPath.mkdirs();
}
//Base64解码,生成.png图片
BASE64Decoder decoder = new BASE64Decoder();
byte[] decoderBytes = decoder.decodeBuffer(imgStr);
FileOutputStream out = new FileOutputStream(new File(ctxPath+fileName));
out.write(decoderBytes);
out.close();
return fileName; // 返回保存后的文件名称
} catch (Exception e){
logger.error("上传保存图片时报错:{}",e);
return "上传保存图片失败。";
}
}
效果:

h5实现电子签名的更多相关文章

  1. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap(四)

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  4. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  5. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  6. 旺财速啃H5框架之Bootstrap(三)

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  7. H5程序员如何利用cordova开发跨平台应用

    什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...

  8. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  9. 【腾讯Bugly干货分享】H5 视频直播那些事

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...

随机推荐

  1. C语言入门-ide的概念介绍及codeblocks编辑器安装汉化

    大家好,本章教程就ide(集成开发环境)来说一说. ide就是编译器+编辑器,原理就是在编辑器写代码,然后编辑器会让编译器来编译成二进制可执行文件. 常见的c/c++编译器有mingw64,msvc, ...

  2. python报错:AttributeError: module 'pdb' has no attribute 'set_trace'

    在第一次使用python中的pdb模块式,pdb.set_trace()时编译器总是会报错,一开始总是以为是自己的拼写错误,但经过反复检查后发现并不是自己的拼写错误.而是我创建的测试文件的名称是pdb ...

  3. Java 树结构实际应用 四(平衡二叉树/AVL树)

    平衡二叉树(AVL 树) 1 看一个案例(说明二叉排序树可能的问题) 给你一个数列{1,2,3,4,5,6},要求创建一颗二叉排序树(BST), 并分析问题所在.  左边 BST 存在的问题分析: ...

  4. 7、MyBatis教程之分页实现

    8.分页实现 1.limit实现分页 思考:为什么需要分页? 在学习mybatis等持久层框架的时候,会经常对数据进行增删改查操作,使用最多的是对数据库进行查询操作,如果查询大量数据的时候,我们往往使 ...

  5. Java例题_27 100以内的素数

    1 /*27 [程序 27 求素数] 2 题目:求 100 之内的素数 3 */ 4 5 /*分析 6 * 素数:是指在大于1的自然数中,除了1和它本身以外不再有其他因数的自然数. 7 * 同第二题: ...

  6. Python 网络编程 C/S建立Socket连接

    分为客户端和服务端 服务端 server.py 客户端 1 #coding=utf-8 2 import socket 3 4 client = socket.socket() #生成socket连接 ...

  7. 【SqlServer】管理全文索引(FULL TEXT INDEX)

    Sql Server中的全文索引(下面统一使用FULLTEXT INDEX来表示全文索引),是一种特定语言搜索索引功能.它和LIKE的不一样,LIKE主要是根据搜索模板搜索数据,它的效率比FULLTE ...

  8. MySQL数据库高级一:架构介绍

    两天半就可以 严禁使用 精通 在简历上 了解的越多,越比他人有优势 linux的mysql需要使用中文字符集那么就要修改配置文件 1.mysql的linux版 安装和卸载不说了 2.逻辑架构 总体概况 ...

  9. JAVAEE_Servlet_22_Cookie实现十天内免登录

    Cookie实现十天内免登录 代码: - CheckLogin 查看是否获取到了Cookie,如果获取到了连接数据库验证Cookie发过来的用户名和密码,如果没有获取到Cookie信息,那么就跳转到登 ...

  10. Java并发的背景

    在操作系统中,并发是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机上运行,但任一个时刻点上只有一个程序在处理机上运行. 并发与操作系统的生命历程息息相关.进程的 ...