ddddd

当前位置：码农之家-程序员学习> HTML5> html5实现电子签名并下载

html5实现电子签名并下载

作者：程序员11 时间：2023-06-26 人气：298 QQ交流群\邮箱:1003265987@qq.com

html5实现电子签名并下载

要展示的内容

1.效果

如下所示效果：

2.代码

首先需要下载插件，插件位置如下所示：

链接：https://pan.baidu.com/s/11aewmVKaFcJoZoBR9Ju3dQ

提取码：04qe

如下所示代码：

<!DOCTYPE html>
<html>

<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="css/style.css">-->
    <style>
        .canvasDiv {
            width: 800px;
            height: 500px;
            border: 1px solid gray;
        }

        #editing_area {
            width: 800px;
            height: 500px;
            border: 1px solid darkred;
        }
        #canvasEdit {
            width: 800px;
            height: 500px;
            border: 1px solid gold;
        }
    </style>
</head>

<body>
<div class="canvasDiv">
    <div id="editing_area">
        <canvas id="canvasEdit"></canvas>
    </div>
</div>
<div class="btnDiv">
    <a id="sign_clear" class="clearBtn">清除</a>
    <a id="sign_clear1" class="down none" download="download">下载</a>
    <a id="sign_clear2" class="clearBtn">截屏</a>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="./js/esign.js"></script>
<script type="text/javascript" src="./js/html2canvas.min.js"></script>
<script type="text/javascript">
  function convertCanvasToImage(canvas) {
    return canvas.toDataURL("image/png");
  };

  function takeScreenshot() {
    html2canvas(document.body, {
      width: document.body.clientWidth / 2 + 1,
    }).then(function(canvas) {
      alert('截取成功');
      var imgUrl = convertCanvasToImage(canvas); //截取图片路径,该路径为服务器参数
      console.log(imgUrl);
      document.querySelector(".down").setAttribute('href', imgUrl);
      $('#sign_clear1').removeClass('none');
    });
  };
  $(function() {
    //初始化
    $(document).esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");
    $(document).on('click', '#sign_clear2', takeScreenshot);
  });
</script>
</body>

</html>