手写签名插件—jSignature使用心得

最近需要做一个移动端手写签名的功能，上网搜了一下基本都是jSignature这个插件，几乎没得第二选择，于是照着网上的各个版本copy测试，在PC端测试是没什么问题的，很easy。

问题1：:在移动端改变了canvas的父盒子大小后就出现问题了，手写的和显示的不在一起，jSignature画笔出现了偏移，经过审查元素发现，是由于canvas的尺寸大小变成了100%引起的，解决办法就是需要手动设置canvas的尺寸，如果用100%、rem这些相对单位是会出现问题的，如果需要做响应式的，那么就在媒体查询里面写，如果需要用js控制，需设置canvas.attr(“width”,”200”)，注意不要带单位！！，结论：style里的宽高和canvas标签里的宽高要对应，不然笔的位置就出现偏差；

问题2：由于移动端有高倍屏，所以出现了画布笔画模糊的问题，这就需要根据屏幕的DPI来更改画布的大小，普通屏幕设置style=”width:300px;height:150px;” 属性里设置width=”300” height=”150”，在高清屏时style的宽高不变，canvas里的width=”300*DPI” heigth=”150*DPI”，这样就清晰了，好在已经有前辈封装好了，hidpi-canvas.js直接拿来用即可。

<script src="js/hidpi-canvas.js"></script>
<script src="js/signature/jSignature.js" ></script>

问题3：落笔不够圆滑的问题，由于设置了画笔的宽度为10px，当点在屏幕上时显示的不是一个点，而是一个方块，一个10*10px的方块，已经看到有大神写了demo出来了，应该是用react写的，暂时还没有研究出来移植到我的代码中，参考地址：canvas签名组件，不过外观和自适应屏幕这块作者可能没有做很多处理，还需要自己再加工；

问题4：签名没有笔锋，也就是没有原笔迹的那种效果，这个可真难到我了，毕竟牵涉到很多算法，不像是一笔画下去那么简单了，原以为web端实现几乎不可能，但还是有国外的高手几年前就写了demo了，正因为是高手写的，看起来也很费劲，文件层层引用，一个签名的页面请求的文件38个之多，想要拿过来用都很难，有兴趣的可以研究一下并分享哦！

GitHub项目名称：sign-here
canvas原笔迹签名demo

下面是签名显示及上传到阿里云OSS代码，有需要的可以看看，如果只是需要看jSignature的参数，百度搜索简单版的看吧。

<script type="text/javascript">     $(function () {$.ajaxSetup({async:false});window.canvasIsEmpty = "Y"//用于判断是否有手写签名，默认是空，无签名.jSignature.js中开启画笔后就会改变这个值。var sigdiv = $("#signature");sigdiv.jSignature('init',{height:'100%',width:'100%',color:"#000",lineWidth:10});$("#closeSign").on("click",function(){reset();                $("#signWrap").removeClass("flex disable-touch");});//点击签名的图片和提示文字弹出签名的画板$("#imageViewBox").on("click","#user_sign_img,#user_sign_tips",function(){getOSSAuth();$("#loadingStatus").css({"width":"0"});//进度条置零$("#loadingStatus span").text("");//清除进度显示文字$("#signWrap").addClass("flex disable-touch");                 });//清除历史签名，从OSS上删除$("#imageViewBox").on("click","#user_sign_delete",function(){$.post("OSSAuth/yjsigndel.shtml",{basename:basename},function(res){layer.msg("电子签名已删除");$("#user_sign_img").attr("src","image/sign_img_default.jpg");$("#user_sign_delete").hide();$("#user_sign_tips").show();})})$("#myShare,#myPatient,#mySst,.store,.sign-in-day").on("click",function(){layer.msg("敬请期待")})});function reset() {var $sigdiv = $("#signature");$sigdiv.jSignature("reset");if(window.canvasIsEmpty === "Y"){$("#signWrap").removeClass("flex");}window.canvasIsEmpty = "Y";}//监听签名动作，并显示预览function jSignature_img() {if(window.canvasIsEmpty === "Y"){layer.msg("请签名");return false;} var $sigdiv = $("#signature");var datapair = $sigdiv.jSignature("getData", "image"); //设置输出的格式，具体可以参考官方文档var i = new Image();i.src = "data:" + datapair[0] + "," + datapair[1];i.crossOrigin="anonymous";$("#user_sign_img").attr("src",i.src);$("#user_sign_tips").hide();//封装blob对象  var blob = convertBase64UrlToBlob(i.src); upload(blob)}function convertBase64UrlToBlob(urlData){var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte//处理异常,将ascii码小于0的转换为大于0var 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'});}/* 图片上传 */ var hostUrl=window.location.protocol+"//"+window.location.host+"/yunjingservice/"; var basename=Base64.encodeURI("${user_name}");       var accessid='',policy='', Signature='', key='signature/${user_id.substring(0, 4)}_'+basename+'.png' ,host='',expire = 0,now = 0;// 可以判断当前expire是否超过了当前时间，如果超过了当前时间，就重新取一下，3s 做为缓冲function getOSSAuth(){now = Date.parse(new Date()) / 1000; if (expire < now + 3){$.post(hostUrl + "OSSAuth/yjsign.shtml",{dir:"signature"},function(data){console.dir(data);accessid=data.accessid;policy=data.policy;signature=data.signature;expire=data.expire;host=data.host;});}}function get_suffix(filename) {pos = filename.lastIndexOf('.')suffix = ''if (pos != -1) {suffix = filename.substring(pos)}return suffix;}function upload(blob){getOSSAuth();//获取授权var request = new FormData(); request.append('OSSAccessKeyId', accessid);request.append('policy', policy);request.append('Signature',signature);request.append('key',key);//+filenamerequest.append('success_action_status','200');//status头，如果不设置返回的是204request.append('Access-Control-Allow-Origin','*');request.append('Access-Control-Allow-Methods','GET, POST');//request.append('file', $(".upload_input")[0].files[0]);request.append("fileData", blob);//fileData为自定义 request.append('file', blob);request.append("imageName",blob);$.ajax({url: host,data: request,processData: false,cache: false,async: false,contentType: false,//关键是要设置contentType 为false，不然发出的请求头 没有boundarytype: "POST",beforeSend:function(){var width = 1;timer = setInterval(function(){$("#loadingStatus").css({"width":width + "%"});$("#loadingStatus span").text("上传中"+width+"%")width++;if(width == 98){clearInterval(timer)}},34)},success: function (data,textStatus, request) {console.log(data)if (request.status == '200') {reset();clearInterval(timer)$("#loadingStatus").css({"width":"100%"});//$("#imageViewBox").css({"height":"auto"})$("#signWrap").removeClass("flex");$("#user_sign_delete").show();layer.msg('签名保存成功！');}},error: function (data,textStatus, request) {layer.msg('上传失败，请重试！');},complete:function(){}});}var signImgSrc = "https://biangene.oss-cn-shenzhen.aliyuncs.com/signature/${user_id.substring(0, 4)}_"+basename+".png";$(function(){var time = Date.parse(new Date());$("#user_sign_img").attr("src","https://biangene.oss-cn-shenzhen.aliyuncs.com/signature/${user_id.substring(0, 4)}_"+basename+".png?"+time);});$(window).load(function(){$("img.user_sign").each(function() {if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { $("#user_sign_img").attr("src","image/sign_img_default.jpg").show();$("#user_sign_tips").show();$("#user_sign_delete").hide();}else{$("#user_sign_img").show()$("#user_sign_tips").hide();$("#user_sign_delete").show();}});});  </script>

手写签名插件—jSignature使用心得相关推荐

web 前端签名插件_手写签名插件—jSignature
jSignature 是一个通过捕捉笔画的矢量轮廓输出多种格式数据的jQuery插件,通过该插件我们可以实现绘画板.手写签名等功能. 使用该插件需要引入 jQuery 和jSignature.js,首 ...
页面手写签名插件 jSignature.min.js 使用实例
页面手写签名插件 jSignature.min.js 使用实例 jSignature.min.js 插件下载页面使用demo <!DOCTYPE html> <html xmlns ...
html 手写签名插件jSignature
最近要做一个工单完成手动签名提交的功能,上度娘一查,查到了jSignature插件. 1.在我们的代码中引入jSignature.min.js.插件代码(并且引入jquery) 2.html 代码 & ...
canvas 插件_基于Angular的Canvas手写签名插件
灵感来源之前, 在轻流的业务中遇到了一个需求, 是能够让客户使用手写签名的功能. 签名演示问题来了, 这...我不会啊! 这得是Canvas了吧. 正所谓, 插件用的好, 下班走的早. 于是我就开 ...
jSignature手写签名插件
<script src="js/plugins/jSignature/flashcanvas.min.js"></script> <script sr ...
HTML5+jSignature插件手写签名生成图片并转换成文件流实现功能
公司需求html5手写签名,并转换成图片上传服务器项目结构:jquery+springboot项目需要引入js文件:jquery的jquery.min.js .jSignature插件的 jSign ...
jsignature插件实操，完成手写签名图片格式功能
jSignature是什么,如何使用? jSignature是一个H5基于canvas画布得一个插件可以用于手机,浏览器进行手写签名功能实现啦 Jsignature使用效果展示注:本插件最新版是支持 ...
JSignature手写签名的实现（JQuery实现手写电子签名）
JSignature手写签名的实现 jSignature.js是实现手写签名的插件,由于jSignature.js是基于jQuery的,所以使用时需要先引入jQuery. 具体使用方法如下: 第一步, ...
php jSignature,jSignature手写签名
手写板签名demo 请按着鼠标写字签名. $(function() { var $sigp = $("#signature"); $sigp.jSignature(); // 初始 ...

手写签名插件—jSignature使用心得

手写签名插件—jSignature使用心得相关推荐

最新文章

热门文章