项目需求:实现用户阅读文件后,签名确认功能。
1、前端:
使用canvas画布。利用canvas建立一个2d环境的绘图对象context,再配合使用 mousedown,mousemove,mouseup,mouseleave,touchstart,touchmove,Touchend等监听事件来实现我们想要的签名效果(文本动画图片等“绘图”操作)。
用户签完名后,通过canvas.toDataURL("image/png")方法将画布中的图形转换为base64编码格式的图片。有了Data URL数据后,就可以将这些数据直接填充到<img/>元素里,或者直接从浏览器里下载它们。
2.数据库表设计部分字段
signData 【签名内容】 image 允许Null signDataLength 【签名大小】 int 允许Null |
3.后端:
//获取canvas的数据格式如下 String base64data = req.getParameter("imageData"); //base64解密[BASE64Decoder] BASE64Decoder decoder = new BASE64Decoder(); byte[] imgBytes = decoder.decodeBuffer(imageData); for(int i = 0; i < imgBytes.length; i++) { } |
签名文件大小为:imgBytes.length ; 签名文件内容为:imgBytes ;