asp.net可以使用jSignature插件吗怎样使用

发布网友发布时间：2022-05-15 07:11

共2个回答

懂视网时间：2022-05-15 11:33

今天要讲的是用jquery插件jSignature做一个手写板签字的功能，并将签字笔迹保存为图片，下面就是实战案例，一起跟随小编来看一下。

第一步：环境准备

jquery、jSignature

第二步：demo编写

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>手写板签名demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8">
<meta name="description" content="overview & stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
</head>
<body>
 <p id="signature"></p>
 <p style="text-align: center">
 <b style="color: red">请按着鼠标写字签名。</b>
 </p>
 <input type="button" value="保存" id="yes"/>
 <input type="button" value="下载" id="download"/>
 <input type="button" value="重写" id="reset"/>
 <p id="someelement"></p>
 <script src="jquery-2.0.3.min.js"></script>
 <!--[if lt IE 9]>
 <script src="jSignature/flashcanvas.js"></script>
 <![endif]-->
 <script src="jSignature/jSignature.min.js"></script>
 <script>
 $(function() {
  var $sigp = $("#signature");
  $sigp.jSignature(); // 初始化jSignature插件.
  $("#yes").click(function(){
  //将画布内容转换为图片
  var datapair = $sigp.jSignature("getData", "image");
  var i = new Image();
  i.src = "data:" + datapair[0] + "," + datapair[1];
  $(i).appendTo($("#someelement")); // append the image (SVG) to DOM.
  });
  //datapair = $sigp.jSignature("getData","base30");
  //$sigp.jSignature("setData", "data:" + datapair.join(","));
  $("#download").click(function(){
  downloadFile("a.png", convertBase64UrlToBlob($("img").attr("src")));
  });
  $("#reset").click(function(){
  $sigp.jSignature("reset"); //重置画布，可以进行重新作画.
  $("#someelement").html("");
  });
 });
 function downloadFile(fileName, blob){
  var aLink = document.createElement('a');
  var evt = document.createEvent("HTMLEvents");
  evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
  aLink.download = fileName;
  aLink.href = URL.createObjectURL(blob);
  aLink.dispatchEvent(evt);
 }
 /**
  * 将以base64的图片url数据转换为Blob
  * @param urlData
  *  用url方式表示的base64图片数据
  */
 function convertBase64UrlToBlob(urlData){
  
  var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
  
  //处理异常,将ascii码小于0的转换为大于0
  var ab = new ArrayBuffer(bytes.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < bytes.length; i++) {
  ia[i] = bytes.charCodeAt(i);
  }
 
  return new Blob( [ab] , {type : 'image/png'});
 }
 </script>
 
</body>
</html>

第三步：测试
经测试，成功！

热心网友时间：2022-05-15 08:41

jSignature有个getData方法获取签名数据用的，默认数据类型为image（图片base64字符串）。其中有一个native获取的是用户绘制的数据数组，如果没做任何操作或者回退到没有任何操作，这个数组长度为0.追问图片数据怎么保存到数据库中