html 写字板电子签名

admin · 发表于 2022-7-9 08:22:18

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="yiyuan.ico" type="image/x-icon" />
<link rel="shortcut icon" href="yiyuan.ico" type="image/x-icon"/>
<script type="text/javascript" src="js/jquery.js"></script>
<title>电子签名</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
.canvas {
      /*width: 100%;*/
      display: block;
      border: 1px solid red;
}
#clear {
      margin: 0 auto;
      display: inline-block;
      padding: 5px 10px;
      width: 100px;
      height: 40px;
      line-height: 40px;
      border: 1px solid #eee;
      background: #e1e1e1;
      border-radius: 10px;
      text-align: center;
      margin: 20px auto;
      cursor: pointer;
}

#save {
      margin: 0 auto;
      display: inline-block;
      padding: 5px 10px;
      width: 100px;
      height: 40px;
      line-height: 40px;
      border: 1px solid #eee;
      background: #e1e1e1;
      border-radius: 10px;
      text-align: center;
      margin: 20px auto;
      cursor: pointer;

}
</style>
<input type="hidden" id="tjbh" value="${tjbh}">
<input type="hidden" id="signType" value="${signType}">
<body data-ext-version="1.4.2">
<div style="text-align: center">
<canvas id="canvas" width="400" height="200" style="border:1px solid #000000;">
您的浏览器不支持canvas技术,请升级浏览器!
</canvas>
<div>
<span id="clear">清空签名板</span>
<span id="save">保存签名</span>
</div>
</div>
</body>
<script type="text/javascript">
function WriteFont(id, options) {
      var self = this;
      this.canvas = document.getElementById(id);
      var obj = {
         canvas: this.canvas,
         context: this.canvas.getContext("2d"),
         isWrite: false, //是否开始
         lastWriteTime: -1,
         lastWriteSpeed: 0,
         lastWriteWidth: 0,
         canvasWidth: 400, //canvas宽高
         canvasHeight: 200,
         isShowBorder: true, //是否显示网格
         bgColor: '#fff', //背景色
         borderWidth: 2, // 网格线宽度
         borderColor: "#fff", //网格颜色
         lastPoint: {}, //
         writeWidth: 2, //基础轨迹宽度
         maxWriteWidth: 30, // 写字模式最大线宽
         minWriteWidth: 1, // 写字模式最小线宽
         writeColor: '#000', // 轨迹颜色
         isWriteName:false //签名模式
      }

      for(var name in options) {
         obj[name] = options[name];
      }

      /**
      * 轨迹宽度
      */
      this.setLineWidth = function() {
         var nowTime = new Date().getTime();
         var diffTime = nowTime - obj.lastWriteTime;
         obj.lastWriteTime = nowTime;
         var returnNum = obj.minWriteWidth + (obj.maxWriteWidth - obj.minWriteWidth) * diffTime / 30;
         if(returnNum < obj.minWriteWidth) {
            returnNum = obj.minWriteWidth;
         } else if(returnNum > obj.maxWriteWidth) {
            returnNum = obj.maxWriteWidth;
         }

         returnNum = returnNum.toFixed(2);
//写字模式和签名模式
         if(obj.isWriteName){
            obj.context.lineWidth = obj.writeWidth;
         }else{
            obj.context.lineWidth = obj.lastWriteWidth = obj.lastWriteWidth / 4 * 3 + returnNum / 4;
         }
      }

      /**
      * 绘制轨迹
      */
      this.writing = function(point) {
         obj.context.beginPath();
         obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);
         obj.context.lineTo(point.x, point.y);
         self.setLineWidth();
         obj.context.stroke();
         obj.lastPoint = point;
         obj.context.closePath();
      }

      /**
      * 轨迹样式
      */
      this.writeContextStyle = function() {
         obj.context.beginPath();
         obj.context.strokeStyle = obj.writeColor;
         obj.context.lineCap = 'round';
         obj.context.lineJoin = "round";
      }

      /**
      * 写开始
      */
      this.writeBegin = function(point) {
         obj.isWrite = true;
         obj.lastWriteTime = new Date().getTime();
         obj.lastPoint = point;
         self.writeContextStyle();
      }

      /**
      * 写结束
      */
      this.writeEnd = function() {
         obj.isWrite = false;
      }

      /**
      * 清空画板
      */
      this.canvasClear = function() {
         obj.context.save();
         obj.context.strokeStyle = '#fff';
         obj.context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);
         if(obj.isShowBorder && !obj.isWriteName) {
            obj.context.beginPath();
            var size = obj.borderWidth / 2;
//画外面的框
            obj.context.moveTo(size, size);
            obj.context.lineTo(obj.canvasWidth - size, size);
            obj.context.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);
            obj.context.lineTo(size, obj.canvasHeight - size);
            obj.context.closePath();
            obj.context.lineWidth = obj.borderWidth;
            obj.context.strokeStyle = obj.borderColor;
            obj.context.stroke();
//画里面的框
            obj.context.moveTo(0, 0);
            obj.context.lineTo(obj.canvasWidth, obj.canvasHeight);
            obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
            obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
            obj.context.lineTo(0, obj.canvasHeight / 2);
            obj.context.lineTo(0, obj.canvasHeight);
            obj.context.lineTo(obj.canvasWidth, 0);
            obj.context.lineTo(obj.canvasWidth / 2, 0);
            obj.context.lineTo(obj.canvasWidth / 2, obj.canvasHeight);
            obj.context.stroke();

         }
         obj.context.restore();
      }

      /**
      * 保存图片格式base64
      */
      this.saveAsImg = function() {
         var image = new Image();
         image.src = this.canvas.toDataURL("image/png");
         if(image.src == this.emptyCanvas) {
            alert('请先签名')
            return;
         }
         if(!confirm("你确定提交当前的签名吗?")){
            console.log("你确定提交当前的签名吗?-->NO");
            return;
         }
         var base64Image=image.src;
         console.log('提交的内容===>', image.src)
         var params={
            "tjbh":jQuery("#tjbh").val(),
            "signType":jQuery("#signType").val(),
            "picture":base64Image
         }
         jQuery.ajax({
            url:"autoGraphAction_index_submitSign.do",
            type:"post",
            data:params,
            dataType:"json",
            success:function(data){
                  //alert("data:"+JSON.stringify(data))
                  if(data.code!=200){
                  alert(data.message);
                  return;
                  }
                  alert(data.message);
            },
            error:function(data,textStatus){
                  alert("网络连接错误，请稍后再试!");

            }
         });

      };

      /**
      * 初始化画板
      */
      this.canvasInit = function() {
         this.canvas.width = obj.canvasWidth;
         this.canvas.height = obj.canvasHeight;
         this.emptyCanvas = this.canvas.toDataURL("image/png");
      }

      /**======================事件绑定===========================**/

      this.canvas.addEventListener('mousedown', function(e) {
         var point = {
            x: e.offsetX || e.clientX,
            y: e.offsetY || e.clientY
         };
         self.writeBegin(point);
      });

      this.canvas.addEventListener('mouseup', function(e) {
         var point = {
            x: e.offsetX,
            y: e.offsetY
         };
         self.writeEnd(point);
      });

      this.canvas.addEventListener('mouseleave', function(e) {
         var point = {
            x: e.offsetX,
            y: e.offsetY
         };
         self.writeEnd(point);
      });

      this.canvas.addEventListener('mousemove', function(e) {
         if(obj.isWrite) {
            var point = {
                  x: e.offsetX,
                  y: e.offsetY
            };

            self.writing(point);
         }
      });

//移动端
      this.canvas.addEventListener('touchstart', function(e) {
         var touch = e.targetTouches[0];
         var point = {
            x: touch.pageX || touch.clientX,
            y: touch.pageY || touch.clientY
         };
         self.writeBegin(point);
      });
      this.canvas.addEventListener('touchend', function(e) {
         var touch = e.changedTouches[0];
         var point = {
            x: touch.pageX,
            y: touch.pageY
         };
         self.writeEnd(point);
      });
      this.canvas.addEventListener('touchmove', function(e) {
         var touch = e.targetTouches[0];
         var point = {
            x: touch.pageX,
            y: touch.pageY
         };
         self.writeEnd(point);
      });
      this.canvas.addEventListener('touchmove', function(e) {
         var touch = e.targetTouches[0];
         var point = {
            x: touch.pageX,
            y: touch.pageY
         };
         self.writing(point);
      });

      this.canvasInit();
      this.canvasClear();

      this.option = obj;
      obj.control = {
         clearCanvas: self.canvasClear
      };
}

/**
   * 初始化调用
   * 设置参数
   */
var writeCanvas = new WriteFont('canvas', {
      borderWidth: 10,
      writeWidth:3,
      borderColor: '#ff6666',
      isWriteName:true //签名模式
});

document.getElementById('clear').onclick = function() {
      writeCanvas.option.control.clearCanvas();
};

document.getElementById('save').onclick = function() {
      writeCanvas.saveAsImg()
};
</script>
</html>

		自动登录	找回密码
密码			立即注册