H5 canvas签字

最新推荐文章于 2024-07-18 18:43:34 发布

半仙儿~

最新推荐文章于 2024-07-18 18:43:34 发布

阅读量98

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/weixin_42941628/article/details/139122872

版权

<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  <title>签名</title>
  <link rel="stylesheet" href="less/public.css">
  <link rel="stylesheet" href="less/qianming.css">
  <meta name="theme-color" content="#fafafa">
  <script src="js/jquery-3.2.1.min.js"> </script>
  <script src="js/jSignature.js"> </script>
  <script src="js/message.js"></script>
</head>

<body class="body">
  <div style="padding: 20px" class="box">
      <div class="qz_box">
          <!-- canvas 签名-->
          <div id="signature" style="background:#f5f5f5"></div>
          <button type="button" class="btn btn-default btn-block" id="clear">清除</button>
          
      </div>
      <a id="save">保存</a>
  </div>
  <img  src="" id="imgQm"/>
</body>


<script>
    setcanvas();
    function setcanvas() {
        var param = {
            width: '100%', //签名区域的宽
            height: '210px', //签名区域的高
            cssclass: 'signatureBox', //画布的类 可以写自定义的样式
            UndoButton: true, //撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
            signatureLine: false, //去除默认画布上那条横线
            lineWidth: '6' //画笔的大小
        };
        $("#signature").jSignature(param);

        //jSignature提供了清除的API reset
        $('#clear').click(function () {
            $("#signature").jSignature("reset");
        });

        //提交
        $('#save').click(function () {
            if ($("#signature").jSignature('getData', 'native').length === 0) {
                $.message({
                    message:' 请签名后再提交',    //提示信息
                    duration:'2000',       //显示时间（默认：5s）
                    type:'warning',           //显示类型，包括4种：success.error,info,warning 默认info
                });
                return;
            }
            //将签名的画布保存为base64编码字符串 默认是png的
            var datapair = $("#signature").jSignature("getData", "image");
            var i = new Image();
            i.src = "data:" + datapair[0] + "," + datapair[1];
            console.log(i.src);
            $("#imgQm").attr('src',i.src);
            /*****保存签名图片******/
            let url = "https://123.";
            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    img: i.src,
                },
                success: function (data) {
                    console.log(data);
                    localStorage.setItem('signature', data.data.url);
                    $.message({
                        message:'签名成功',    //提示信息
                        duration:'2000',       //显示时间（默认：5s）
                        type:'success',           //显示类型，包括4种：success.error,info,warning 默认info
                    });
                }
            })

        })
    }
</script>
</html>