当前位置: 首页>前端>正文

app javascript 手机上签名 手机端签名插件

    最近需要做一个移动端手写签名的功能,上网搜了一下基本都是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写的,暂时还没有研究出来移植到我的代码中,不过外观和自适应屏幕这块作者可能没有做很多处理,还需要自己再加工;

    问题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>



https://www.xamrdz.com/web/2nu1962989.html

相关文章: