实现文件签名功能（纯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 ；