h5實現電子簽名

前端需要引入：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  "上傳保存圖片失敗。";
    }
}

效果：