对于手写签名生成图片储存和回显的实现

首先感谢网络上分享的文章：http://www.benhailong.com/index.php

js+css的demo下载地址：点击这里

把下载的文件引入到自己的项目中，对应修改js和css的路径。打开 app.js ,找到下面的代码，我这边以生成 png 格式为例

savePNGButton.addEventListener("click", function (event) {
    if (signaturePad.isEmpty()) {
        alert("请先提供签名。");
    } else {
        window.open(signaturePad.toDataURL());
    }
});

用下面的代码，替换掉上面代码中的 window.open(signaturePad.toDataURL()); 修改对应的url

//调用方法 如
post('/ProjectAdmin/tojson.do', {'lines' :signaturePad.toDataURL()});

并在文件末尾添加以下代码

function post(URL, PARAMS) {
    var temp = document.createElement("form");
    temp.action = URL;
    temp.method = "post";
    temp.style.display = "none";
    for (var x in PARAMS) {
        var opt = document.createElement("textarea");
        opt.name = x;
        opt.value = PARAMS[x];
        // alert(opt.name)
        temp.appendChild(opt);
    }

之后 我们就可以去后端写接受的方法：（这里用的是Base64格式）
我这里应用的是play框架，亲们可以根据自己的实际环境自行更改。

如果仅作回显 就可以直接把接受过来的string直接返回就好：

    public static void show(String lines) {
    	render(lines);
    } 

如果需要把图片储存，对Base64进行解码。生成jpeg图片。

这里应用的是play framework 1.2.7

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

因为我接收的string格式是：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApIAAAEqCAYAAACm+bDjAAAgAElEQVR4Xu3dT6g2V54X8N/gvwbFdECGQdHu4NKBdEBlECGdhSK0kMSNjpt0XLhNeusmyUKG…

所以要对字符串进行下处理。 转换方法如下：

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;
       }
    }

好了 大功告成 去看看你的D盘是不是有一张图片。这个demo 完成了基本实现 ，具体根据各位大大的环境自行调试就好。

手写界面

回显

生成的本地图片

如果觉得帮助到了各位大大 请给小弟赞一下 鼓励鼓励！