前端需要引入：jSignature.min.js ，jquery-1.9.1.min.js
前端 部分写法：
body内加
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 "上传保存图片失败。";
}
}
效果：
