jsignature生成图片上传至java后台保存为png图片格式

前端

该插件使用方法很简单，直接引用一下官方到demo了，
https://willowsystems.github.io/jSignature/#/about/
代码如下:

    var $sigdiv = $("#signature") 
	$sigdiv.jSignature() // 使用dom容器初始化
	$sigdiv.jSignature("reset") // 这是重置签名的方法
	// 这是一个数组，拿到到是签名到svg base64 
	var datapair = $sigdiv.jSignature("getData", "svgbase64") 
	// 如果想要预览，直接把一个img标签到dom到src赋值为如下即可
	document.getElementById("myImg").src = "data:" + datapair[0] + "," + datapair[1] 
	

需求

现在需求是把生成的签名作为图片存到服务器，以便以后的浏览，也就是说可以等价于图片上传，代码如下

前端

  var data = $("#signature").jSignature("getData", "svgbase64");
       // 使用formdata上传图片 data[1]是svg图片的base64
       var f = new FormData();
       f.append("fileStr", data[1]);
       $.ajax({
        url: "你的后台url",
        method: 'post',
        data: f, // formData
        contentType: false,
        processData: false,
        success: function(r){
             // 此处后台可以将保存之后的文件名返回
             console.log(r);
        },
        error: function(e){
            alertLayer("服务器异常！");
        }
    })

后台

    @RequestMapping("/uploadFile")
    @ResponseBody                // fileStr就是前台发送的data[1]
    public Object upload(String fileStr){
        try{
            // 将svg base64字符串保存为图片
            String fileName = savePic(fileStr);
            return fileName;  // 返回保存后的文件名称
        } catch (Exception e){
            e.printStackTrace();
        }
    }



    public String savePic(String base64) throws IOException, TranscoderException {
        byte[] imageByte;
        BASE64Decoder decoder = new BASE64Decoder();
        imageByte = decoder.decodeBuffer(base64);
        ByteArrayInputStream bis = new ByteArrayInputStream(imageByte);
        TranscoderInput inputSvgImage = new TranscoderInput(bis);
        PNGTranscoder converter = new PNGTranscoder();
        // 文件名称可根据自己的业务需求自定
        String s = CommonUtil.generateUUID();
        String fileName = s + ".png";

        // 文件路径也可以根据自己的需求自定义
        File outputfile = new File("/Users/sunh/img/" + fileName);

        FileOutputStream pngFileStream = new FileOutputStream(outputfile);

        TranscoderOutput outputPngImage = new TranscoderOutput(pngFileStream);
        converter.transcode(inputSvgImage, outputPngImage);
        return fileName;
    }

如果不出意外，那么你前端的签名应该会生成图片到后台相应到路径中来，值得一提的是后台代码用到了一个开源的库，apache batik,使用之前别忘记引入哦，这里把地址也奉上吧:
https://xmlgraphics.apache.org/batik/download.html
注意下载 -bin的包，src的是源码。

有更多问题的小伙伴可以加qq群讨论:

群号:877291396
二维码:

该文章为博主原创，如需转载，请留言并注明出处，谢谢