登录

微信朋友圈本地推广广告

借助LBS技术,可以精准定向周边3-5公里人群,无论您是新店开业、促销、新品上市、会员营销,朋友圈本地广告都能有效触达顾客,提高门店顾客到访。商户可以通过门店名称、城市的方式加强所在地用户对商家品牌的认知。

加盟代理

html 手写签名插件jSignature

2020-11-02 热度:189 点赞 收藏

最近要做一个工单完成手动签名提交的功能,上度娘一查,查到了jSignature插件。

1.在我们的代码中引入jSignature.min.js。插件代码(并且引入jquery)

2.html 代码

<li style="margin-top:20px;">
    <label style="display:inline-block;margin-bottom: 5px;">巡检人手写签名:</label>
    <div id="canvas"></div>
    <button id="canvasBtn" type="button" onclick="savePic()">完成</button>
    <button type="button" onclick="resetCanvas()">清除</button>
</li>

3.jquery代码

<script>
    $(function(){
        //画布初始化 transparent去除初始化的下划线
        //lineWidth 设置画笔粗细为2
        $("#canvas").jSignature({width:'100%',height:300,"decor-color": "transparent",lineWidth: '2'});
    });
    //输出签名图片
    function savePic(){
        var $sigdiv = $("#canvas");
        var length = $sigdiv.jSignature('getData', 'native').length;
        //判断是否有签名
        if(length == 0){
            layer.msg('请先签名再提交',{icon:5});
            return;
        }
        //因为需要保存为图片,此处不用
        //var datapair = $sigdiv.jSignature("getData", "svgbase64");
        //采用图片形式
        var datapair = $sigdiv.jSignature("getData");
        //若采用svg使用
        //var i = new Image();
        //i.src = "data:" + datapair[0] + "," + datapair[1];
        $('#canvas').html("<img src='"+datapair+"'>");
        $('#canvasBtn').text('重写');
        $('#canvasBtn').attr('onclick','getCanvas()');
    }
    function getCanvas(){
        $("#canvas").html("");
        $("#canvas").jSignature({width:'100%',height:300,"decor-color": "transparent",lineWidth: '2'});
        $('#canvasBtn').text('完成');
        $('#canvasBtn').attr('onclick','savePic()');
	}
    function resetCanvas(){
        var $sigdiv = $("#canvas");
        $sigdiv.jSignature("reset");
    }
 
</script>

4.提交直接把base64 image提交,后台转化为图片保存

免责声明:本站媒体稿件仅为传播分享,并不代表赞同其观点或证实其内容的真实性,本站不承担此类稿件侵权行为的连带责任。如涉及作品内容、版权等问题,请联系我们删除!

  • 评论列表
  • 暂无评论


  • 首页

  • 新闻

  • 发布

  • 招聘

  • 我的
  • 加盟
    代理
  • 联系
    我们
  • 关注
    微信
  • 返回
    顶部