簽字 變成 圖片 純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;
}
}

 

其實還是挺簡單的  ...   我們都是站在大佬的肩膀上前進  ... 希望有成為大佬的一天  .. 加油 ..

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM