手写签名插件—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的转换为大于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'});
}

/* 图片上传 */
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);//+filename
request.append('success_action_status','200');//status头，如果不设置返回的是204
request.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，不然发出的请求头 没有boundary
type: "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>