实现文件签名功能(纯JS如何实现文件签名)

项目需求:实现用户阅读文件后,签名确认功能。

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"); String imageData = base64data.split(",")[1]; //base64解密[BASE64Decoder] BASE64Decoder decoder = new BASE64Decoder(); byte[] imgBytes = decoder.decodeBuffer(imageData); for(int i = 0; i < imgBytes.length; i++) { if (imgBytes[i] < 0){ //调整异常数据 imgBytes[i] += 256; } }

签名文件大小为:imgBytes.length ; 签名文件内容为:imgBytes ;

经验分享 程序员 微信小程序 职场和发展