新提出了一個要求,說要在系統加一個簽字的功能,本來以為要使用控件之類的,在檢索過程中,發現使用純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;
}
}
其實還是挺簡單的 ... 我們都是站在大佬的肩膀上前進 ... 希望有成為大佬的一天 .. 加油 ..