jsignature生成图片上传至java后台保存为png图片格式
前端该插件使用方法很简单,直接引用一下官方到demo了,https://willowsystems.github.io/jSignature/#/about/代码如下:var $sigdiv = $("#signature")$sigdiv.jSignature() // 使用dom容器初始化$sigdiv.jSignature("reset") // 这是
·
前端
该插件使用方法很简单,直接引用一下官方到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
二维码:
该文章为博主原创,如需转载,请留言并注明出处,谢谢
更多推荐
已为社区贡献1条内容
所有评论(0)