签字 变成 图片 纯js+html实现

新提出了一个要求，说要在系统加一个签字的功能，本来以为要使用控件之类的，在检索过程中，发现使用纯js+html可以实现

 

链接：https://pan.baidu.com/s/1BQiyVK0Gg8kne8Wu8NlYTA
提取码：twpu
这是 资源

双击html 就能打开， 把这个集成到项目里就好了

 

想要集成 app.js 要改一下

savePNGButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
alert("请先提供签名。");
} else {
// window.open(signaturePad.toDataURL());
post('/test/sign/tojson', {'lines' :signaturePad.toDataURL()});
}
});

function post(URL, PARAMS) {
var formData = new FormData();
formData.append("lines", PARAMS.lines);
$.ajax({
type:'POST',
url:URL,
data:formData,
contentType:false,
processData:false,
// dataType:"json",
mimeType:"multipart/form-data",
success:function(data){
if(data){
alert("保存成功!");
}else{
alert("保存失败!");
}
}
});

}

----------------------------------------

接下来是controller 层

 

@RequestMapping("tojson")
@ResponseBody
public String tojson(String lines){
System.out.println(lines);

show( lines) ;
return "qmok";
}

public void show(String lines) {
boolean b = GenerateImage(lines, "D:\\aaaa.jpg");
if (b) {
System.out.println("图片存储成功");
}else {
System.out.println("图片存储失败");
}


}

public boolean GenerateImage(String imgStr, String imgFilePath) {// 对字节数组字符串进行Base64解码并生成图片
if (imgStr == null) // 图像数据为空
return false;
Decoder decoder = Base64.getDecoder();
try {
//对字符串进行处理
int j = imgStr.indexOf(',');
if (j!=-1) {
imgStr=imgStr.substring(j+1);
}

// Base64解码
byte[] bytes = decoder.decode(imgStr);
for (int i = 0; i < bytes.length; ++i) {
if (bytes[i] < 0) {// 调整异常数据
bytes[i] += 256;
}
}

// 生成jpeg图片
File file = new File(imgFilePath);
if (!file.exists()) {
file.createNewFile();
}
OutputStream out = new FileOutputStream(file);
out.write(bytes);
out.flush();
out.close();
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}

 

其实还是挺简单的  ...   我们都是站在大佬的肩膀上前进  ... 希望有成为大佬的一天  .. 加油 ..