lxl
/
LIOT


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493
							<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>在线签署</title>
  <meta content="IE=edge" http-equiv="X-UA-Compatible" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <link href="base.css" rel="stylesheet" type="text/css">
  <!--<link href="layer/need/layer.css" rel="stylesheet" type="text/css">-->
  <script src="layer/layer.js" type="text/javascript"></script>
  <style>
    body, html {
      overflow: hidden;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
    }
    canvas {
      background: white;
      border: 1px dashed black;
      /*position: absolute;
      top: 0;
      left: 0;*/
    }

    .top_bars {
      /*position: fixed;*/
      background: #f1f1f1;
    }

      .tools {
          /*position: absolute;
      width: 1.3rem;
      height: .5rem;
      left: -18px;*/
          margin-left: 2.5rem;
          margin-right: 2.5rem;
          margin-top: 0.15rem;
          float: left;
          background: #495060;
          color: white;
          line-height: 0.5rem;
          text-align: center;
          /*transform: rotateZ(90deg);*/
      }

    .clearCanvas {
      width: 1.3rem;
    }

      .pencilOrMove {
          width: 1.3rem;
      }

    .finish {
      width: 1.3rem;
      background: #0590ff;
    }

      .reload {
          width: 1.3rem;
      }


    .tips {
      font-size: 0.32rem;
      text-align: center;

    }

    /*.secondState {
      transform: rotate(90deg);
      z-index: 10;
      position: fixed;
      top: 50%;
      width: 8.4rem;
      left: 52px;
      font-size: 0.25rem;
    }*/

    /*.btn_put {
      border: 0;
      padding: 10px;
      color: white;
      border-radius: 4px;
      outline: none;
    }

    .btn_success {
      background: #58c73d;
    }

    .btn_fail {
      background: #d63c3c;
    }*/

    .flex_bottom {
      position: fixed;
      bottom: 10px;
      z-index: 90;
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
    }

    .mask {
      position: fixed;
      top: 0;
      left: 0;
      background: white;
      width: 100%;
      height: 100%;
      z-index: 40;
    }

    #canvas2 {
      width: 100%;
      height: 100%;
    }
    #resultImg{
      position:absolute;
      left:0;
      top:0;
      z-index: 50;
    }
  </style>
</head>
<body>
    <div class="top_bars" id="top">
        <div class="tools clearCanvas" id="clear">清除文字</div>
        <div class="tools pencilOrMove" id="isUsePencil">移动签字板</div>
        <div class="tools finish" id="finish">提交签名</div>
        <div class="tools reload" id="reload">重新签署</div>
    </div>
    <div>
        <canvas id="canvas"></canvas>
    </div>
    <div>
        <p class="tips" id="tips">请在空白虚线区域内手写您的姓名</p>
    </div>
    <script>
        var NAME = 0;//签名状态
        var STATEMENT = 1;//抄写状态
        var supportsPassive = false;
        var canvasPaint = {};//画布相关状态变量
        var events = null;//是移动端还是pc端
        var state = NAME;
        try {
            var opts = Object.defineProperty({}, 'passive', {
                get: function () {
                    supportsPassive = true;
                }
            });
            window.addEventListener("test", null, opts);
        } catch (e) {
        }
        window.onload = function () {
            //show_msg('请使用手机模式预览DEMO');
            canvasPaint.canPaint = true;//是否可以写字
            canvasPaint.piece = 17;//canvas的高度乘以了17倍(拖动画布功能)
            canvasPaint.width = 1200;
                //window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            canvasPaint.height = 600;
            //window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            document.getElementById("top").style.width = canvasPaint.width + 'px';
            document.getElementById("top").style.height = 50 + 'px';
            //document.getElementById("top").style.height = canvasPaint.height + 'px';
            //canvasPaint.width = canvasPaint.width - 40;//预留工具栏宽度
            canvasPaint.clearBtn = document.getElementById("clear");
            canvasPaint.pencilBtn = document.getElementById("isUsePencil");
            canvasPaint.finish = document.getElementById("finish");
            //canvasPaint.tips = document.getElementById("tips");
            canvasPaint.reload = document.getElementById("reload");
            //canvasPaint.secondState = document.getElementById("secondState");
            //canvasPaint.back = document.getElementById("back");
            //canvasPaint.btn_success = document.getElementById("btn_success");
            //canvasPaint.btn_fail = document.getElementById("btn_fail");
            if (state === NAME) {
                //签名模式隐藏拖动画布按钮
                canvasPaint.pencilBtn.style.display = 'none';
            }
            try {
                canvasPaint.canvas = document.getElementById("canvas");
                canvasPaint.ctx = document.getElementById("canvas").getContext("2d");
                canvasPaint.canvas.width = canvasPaint.width;
                canvasPaint.canvas.height = canvasPaint.height;
                    //* canvasPaint.piece;
                canvasPaint.canvas.style.width = canvasPaint.canvas.width + 'px';
                canvasPaint.canvas.style.height = canvasPaint.canvas.height + 'px';
            } catch (e) {
                layer.open({
                  content: '您的手机版本过低,不支持在线签署,请使用打印方式签字'
                  , btn: ['确定'],
                  shadeClose: false
                  , yes: function (index) {
                    layer.close(index);
                    location.reload();
                  }
                });
            }
            canvasPaint.ctx.lineCap = 'round';
            canvasPaint.ctx.lineJoin = 'round';
            canvasPaint.ctx.strokeWidth = 8;
            canvasPaint.ctx.lineWidth = 8;
            canvasPaint.isSupportTouch = ("ontouchstart" in document);
            events = ('ontouchstart' in window) ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup'];
            canvasPaint.canvas.addEventListener(events[0], startEventHandler, supportsPassive ? { passive: false } : false);
            canvasPaint.clearBtn.addEventListener(events[0], clearCanvas, false);
            canvasPaint.pencilBtn.addEventListener(events[0], togglePencil, false);
            canvasPaint.finish.addEventListener(events[0], finish, false);
            canvasPaint.reload.addEventListener(events[0], reload, false);
            //canvasPaint.btn_fail.addEventListener(events[0], reload, false);
            //canvasPaint.btn_success.addEventListener(events[0], putImg, false);
            console.log(canvasPaint);
        };

        //清除画布
        function clearCanvas() {
            canvasPaint.ctx.clearRect(0, 0, canvasPaint.canvas.width, canvasPaint.canvas.height);
        }
        //根据base64加载图片
        function preLoadImg(source, callBack, args) {
            debugger;
            var pr = [];
            for (var i = 0; i < source.length; i++) {
                var p = loadImage(source[i])
                    .then(function (img) {
                        return img;
                    })
                    .catch(function (err) {
                        alert("绘制失败，您的手机不支持在线签署");
                    });
                pr.push(p);
            }
            Promise.all(pr)
                .then(function (imgArray) {
                    callBack(imgArray, args);
                });
        }

        function loadImage(url) {
            return new Promise((resolve, reject) => {
                var img = new Image();
                img.onload = function () {
                    resolve(img);
                };
                img.onerror = reject;
                img.src = url;
            });
        }
        //点击完成时的逻辑处理函数
        function finish() {
            debugger;
            canvasPaint.layerIndex = layer.open({ type: 2, shadeClose: false });//遮罩
            if (state === NAME) {
                let image = new Image();
                image.src = canvasPaint.canvas.toDataURL("image/png");
                console.log(image.src);
                return image
                //window.open(image);
                //加载模板图和签的字，回调函数是result函数
                //preLoadImg(['agree.jpg', canvasPaint.canvas.toDataURL()], result);
                //var imgURL = canvasPaint.canvas.toDataURL();
            }
            if (state === STATEMENT) {
                debugger;
                //加载抄的字，回调函数是stateResult函数
                preLoadImg([canvasPaint.canvas.toDataURL()], stateResult);
            }
        }

        function stateResult(imgArr) {
            try {
                statementDraw(imgArr);
                canvasPaint.canvas.removeEventListener(events[0], startEventHandler, false);
                document.removeEventListener(events[0], documentStartEventHandler, false);
                layer.close(canvasPaint.layerIndex);
            } catch (e) {
                layer.close(canvasPaint.layerIndex);
                alert('绘制失败');
            }
        }

        function result(imgArr) {
            try {
                drawName(imgArr);
                layer.close(canvasPaint.layerIndex);
            } catch (e) {
                layer.close(canvasPaint.layerIndex);
                alert('绘制失败');
            }
        }
        //绘制抄写的句子的方法
        function statementDraw(imgArr) {
            canvasPaint.context2.save();
            canvasPaint.context2.translate(490, 3085);
            canvasPaint.context2.rotate(270 * Math.PI / 180);
            canvasPaint.context2.drawImage(imgArr[0], 80, 50, 80, 80 * canvasPaint.ratio);//画反转后的名字
            canvasPaint.context2.restore();
            // console.log(canvasPaint.canvas2.toDataURL());
            document.getElementById('resultImg').setAttribute('src', canvasPaint.canvas2.toDataURL());
            document.getElementById('resultImg').style.display = "block";
            document.getElementById('mask').style.display = "block";
            document.getElementById('flex_bottom').style.visibility = "visible";
            canvasPaint.imgResult = canvasPaint.canvas2.toDataURL();
            console.warn(canvasPaint.imgResult);
            show_msg('到控制台拷贝Base64到浏览器地址可查看大图');
        }
        //抄句子前的预处理
        function prevDrawStatement() {
            clearCanvas();//清除名字
            canvasPaint.finish.innerHTML = "提交抄写";
            canvasPaint.pencilBtn.style.display = 'block';
            canvasPaint.secondState.style.display = 'block';
            canvasPaint.tips.innerHTML = "(最后一步)请抄写屏幕上方引号内的确认语句";
            canvasPaint.tips.style.color = 'red';
            setTimeout(function () {
                canvasPaint.tips.style.color = '#666';
            }, 2000);
            state = STATEMENT;//开始写句子
        }
        //写名字的函数
        function drawName(imgArr) {
            //绘制名字和底部的名字和日期
            canvasPaint.canvas2 = document.getElementById('canvas2');
            canvasPaint.context2 = canvasPaint.canvas2.getContext('2d');
            canvasPaint.ratio = canvasPaint.canvas.height / canvasPaint.canvas.width;
            canvasPaint.context2.drawImage(imgArr[0], 0, 0, 2480, 3507);//img0是底图原合同
            canvasPaint.context2.save();
            canvasPaint.context2.translate(455, 612);//1
            canvasPaint.context2.rotate(270 * Math.PI / 180);
            canvasPaint.context2.drawImage(imgArr[1], 80, 50, 70, 70 * canvasPaint.ratio);//画反转后的名字
            canvasPaint.context2.restore();
            canvasPaint.context2.save();
            canvasPaint.context2.translate(550, 3210);//下方的字 2
            canvasPaint.context2.rotate(270 * Math.PI / 180);
            canvasPaint.context2.drawImage(imgArr[1], 80, 50, 70, 70 * canvasPaint.ratio);//画反转后的名字
            canvasPaint.context2.restore();
            canvasPaint.context2.save();
            canvasPaint.context2.translate(1920, 3100);//下方的字
            canvasPaint.context2.font = "32px bold 微软雅黑";
            canvasPaint.context2.fillStyle = "#000";
            canvasPaint.context2.textAlign = "center";
            canvasPaint.context2.textBaseline = "middle";
            var date = new Date();
            var Y = date.getFullYear() + '/';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
            var D = date.getDate();
            canvasPaint.context2.fillText((Y + M + D), 0, 0);
            canvasPaint.context2.restore();
            prevDrawStatement();
        }
        //是否写字的逻辑(拖动画布)
        function togglePencil() {
            if (canvasPaint.canPaint) {
                canvasPaint.canPaint = false;
                canvasPaint.pencilBtn.innerText = "使用签字笔";
                //不能签字时应该把开始事件去掉，同时加上document事件
                canvasPaint.canvas.removeEventListener(events[0], startEventHandler, false);
                document.addEventListener(events[0], documentStartEventHandler, supportsPassive ? { passive: false } : false);
            } else {
                canvasPaint.canPaint = true;
                canvasPaint.pencilBtn.innerText = "移动签字板";
                //能签字时应该把开始事件绑定上去，同时去掉document事件
                canvasPaint.canvas.addEventListener(events[0], startEventHandler, supportsPassive ? { passive: false } : false);
                document.removeEventListener(events[0], documentStartEventHandler, false);
            }
        }

        function reload() {
            location.reload();
        }

        function documentStartEventHandler(event) {
            event.preventDefault();
            var evt = canvasPaint.isSupportTouch ? event.touches[0] : event;
            canvasPaint.y = evt.clientY;
            canvasPaint.top = parseFloat(canvasPaint.canvas.style.top);
            document.addEventListener(events[1], documentMoveEventHandler, supportsPassive ? { passive: false } : false);
            document.addEventListener(events[2], documentEndEventHandler, supportsPassive ? { passive: false } : false);
        }

        function documentMoveEventHandler(event) {
            event.preventDefault();
            var evt = canvasPaint.isSupportTouch ? event.touches[0] : event;
            canvasPaint.newY = evt.clientY - canvasPaint.y;
            if (canvasPaint.canPaint === false) {
                //边界的判断
                canvasPaint.canvas.style.top = canvasPaint.newY + canvasPaint.top + 'px';
                if (parseFloat(canvasPaint.canvas.style.top) > 0) {
                    canvasPaint.canvas.style.top = 0 + 'px';
                }
                if (Math.abs(parseFloat(canvasPaint.canvas.style.top)) > canvasPaint.canvas.height - canvasPaint.canvas.height / canvasPaint.piece) {
                    canvasPaint.canvas.style.top = -(canvasPaint.canvas.height - canvasPaint.canvas.height / canvasPaint.piece) + 'px';
                }
            }
        }

        function documentEndEventHandler(event) {
            event.preventDefault();
        }

        function startEventHandler(event) {
            event.preventDefault();
            canvasPaint.ctx.beginPath();
            canvasPaint.canvas.addEventListener(events[1], moveEventHandler, supportsPassive ? { passive: false } : false);
            canvasPaint.canvas.addEventListener(events[2], endEventHandler, supportsPassive ? { passive: false } : false);
        }

        function moveEventHandler(event) {
            event.preventDefault();
            var evt = canvasPaint.isSupportTouch ? event.touches[0] : event;
            var coverPos = canvasPaint.canvas.getBoundingClientRect();
            canvasPaint.mouseX = evt.clientX - coverPos.left;
            canvasPaint.mouseY = evt.clientY - coverPos.top;
            if (canvasPaint.canPaint === true) {
                //根据坐标绘制
                canvasPaint.ctx.lineTo(
                    canvasPaint.mouseX,
                    canvasPaint.mouseY
                );
                canvasPaint.ctx.stroke();
            }
        }

        function endEventHandler(event) {
            event.preventDefault();
            canvasPaint.canvas.removeEventListener(events[1], moveEventHandler, false);
            canvasPaint.canvas.removeEventListener(events[2], endEventHandler, false);
        }

        //提交图片
        function putImg() {
            canvasPaint.layerIndex = layer.open({ type: 2, shadeClose: false });
            var formData = new FormData();
            var file = canvasPaint.imgResult;
            formData.append('record', file);
            console.log('模拟成功');
            layer.open({
                content: '上传成功,请等待审核'
                , btn: ['确定'],
                shadeClose: false
                , yes: function (index) {
                    location.reload();
                    layer.close(index);
                },
            });
            layer.close(canvasPaint.layerIndex);
            /*$.ajax({
              url: "agreement_img",
              type: 'POST',
              data: formData,
              processData: false,
              contentType: false,
              success: function (data) {
                layer.close(canvasPaint.layerIndex);
                if (data.code === 200) {
                  layer.open({
                    content: '上传成功,请等待审核'
                    , btn: ['确定'],
                    shadeClose: false
                    , yes: function (index) {
                      location.reload();
                      layer.close(index);
                    },
                  });
                } else {
                  layer.close(canvasPaint.layerIndex);
                  show_msg('上传失败，请重试');
                }
              },
              error: function (error) {
                layer.close(canvasPaint.layerIndex);
                show_msg('上传失败，请重试');
              }
            });*/
        }

        function show_msg(content) {
            layer.open({
                content: content
                , skin: 'msg'
                , time: 5
            });
        }

    </script>
</body>
</html>