H5 电子签

最新推荐文章于 2024-03-16 21:46:45 发布

郭顺杰

最新推荐文章于 2024-03-16 21:46:45 发布

阅读量1.1k

点赞数 3

分类专栏： H5 canvas js 文章标签： html canvas 电子签

本文链接：https://blog.csdn.net/weixin_44314258/article/details/120017791

版权

js 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

废话

先看效果
在这里插入图片描述
很简单的一个需求，单独的小程序去做可简单，有现成的api，单独的网页vue里也有现成的库，我们的项目是一个跨平台的项目要兼容app，小程序，h5。没用市场上的框架，框架是非开源，自己封装的，只能继续写原生的，封装组件了

正文

看下别人的例子京东的nut ui
京东2.X的签名，现在3.X了，这小没用的小组件都去掉了
在这里插入图片描述
附上代码，就是一个canvas实现的小demo，实际完成后台要接第三方，完成实名认证，上传合同，更具位置，再把前端签名的图片贴到对应合同上，最后打印

新建个index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta content="width=device-width,initial-scale=1,maximum-scale=1" name="viewport" />
  <title>电子签</title>
  <meta name="format-detection" content="telephone=no">
  <style>
    body {
      margin: 0 auto;
      padding: 0;
      font-size: 0;
      max-width: 480px;
    }

    .content {
      border: 1px solid #999;
      position: relative;
      margin: 15px;
    }

    .content .tips {
      font-size: 36px;
      color: rgb(221, 221, 221);
      width: 300px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      margin-top: -20px;
      z-index: -1;
    }

    .controller {
      height: 40px;
      width: 100%;
      line-height: 40px;
      font-size: 14px;
      border-bottom: 2px solid #fff;
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      text-align: center;
      box-sizing: border-box;
    }

    .controller {
      color: #fff;
      flex-grow: 1;
    }

    .controller div {
      flex-grow: 1;
    }

    .controller div:nth-child(1) {
      background-color: #c3b8b8;
    }

    .controller div:nth-child(2) {
      background-color: #bf2b2b;
    }

    .controller div:nth-child(3) {
      background-color: #04BE02;
    }
  </style>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

</head>

<body>
  <!-- 签字区 -->
  <div class="content">
    <div class="tips">签字区</div>
    <canvas id="myCanvas"></canvas>
  </div>
  <!-- 展示区 -->
  <div style="text-align: center;">
    <img id="imgView" src="" alt="">
  </div>
  <!-- 操作区 -->
  <div class="controller">
    <div onclick="reset();">重签</div>
    <div onclick="clean();">清空</div>
    <div onclick="save();">确认</div>
  </div>


</body>

</html>

<script>
  var canvas, board;
  canvas = document.getElementById('myCanvas');

  // window.innerWidth window.innerHeight 当前可是窗口的宽高
  // 设置画布宽高
  canvas.width = window.innerWidth - 32;
  canvas.height = 220;

  //验证canvas画布是否为空函数
  function isCanvasBlank(canvas) {
    //系统获取一个空canvas对象
    var blank = document.createElement('canvas');
    blank.width = canvas.width;
    blank.height = canvas.height;
    //比较值相等则为空
    return canvas.toDataURL() == blank.toDataURL();
  }

  board = canvas.getContext('2d');
  //设置画笔粗细
  board.lineWidth = 2;
  board.strokeStyle = "#f00";
  //设置画笔轨迹基于圆点拼接
  board.lineJoin = "round";

  var mousePress = false;
  var last = null;
  var imgView = document.getElementById('imgView')

  function beginDraw(event) {
    mousePress = true;
  }

  function endDraw(event) {
    mousePress = false;
    event.preventDefault();
    last = null;
  }

  function drawing(event) {
    event.preventDefault();
    if (!mousePress) return;
    var xy = GetPos(event);
    if (last != null) {
      board.beginPath();
      board.moveTo(last.x, last.y);
      board.lineTo(xy.x, xy.y);
      board.stroke();
    }
    last = xy;
  }

  function GetPos(event) {
    // 减去css设置的15px间距
    var isTouch = event.type.indexOf('touch') >= 0 ? true : false;
    var x = isTouch ? event.touches[0].pageX - 15 : (event.offsetX + event.target.offsetLeft) - 15;
    var y = isTouch ? event.touches[0].pageY - 15 : (event.offsetY + event.target.offsetTop) - 15;
    return {
      x: x,
      y: y
    };
  }

  function reset() {
    imgView.src = "";
    board.clearRect(0, 0, canvas.width, canvas.height);
  }

  function save() {
    //把canvas画板上的内容转成指定格式图片数据，并进行Base64编码
    var data = canvas.toDataURL("image/png");
    if (data) {
      if (isCanvasBlank(canvas)) {
        alert("请签名");
        return;
      }
    }
    imgView.src = data
  }

  function clean() {
    board.clearRect(0, 0, canvas.width, canvas.height);
  }

  canvas.onmousedown = beginDraw;
  canvas.onmousemove = drawing;
  canvas.onmouseup = endDraw;
  canvas.addEventListener('touchstart', beginDraw, false);
  canvas.addEventListener('touchmove', drawing, false);
  canvas.addEventListener('touchend', endDraw, false);
</script>```

浏览器打开就可以看到效果了

郭顺杰

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
H5 电子签

废话先看效果很简单的一个需求，单独的小程序去做可简单，有现成的api，单独的网页vue里也有现成的库，我们的项目是一个跨平台的项目要兼容app，小程序，h5。没用市场上的框架，框架是非开源，自己封装的，只能继续写原生的，封装组件了正文看下别人的例子京东的nut ui京东2.X的签名，现在3.X了，这小没用的小组件都去掉了附上代码，就是一个canvas实现的小demo，实际完成后台要接第三方，完成实名认证，上传合同，更具位置，再把前端签名的图片贴到对应合同上，最后打印新建个index.ht
复制链接

扫一扫