电子签名功能 原生js

最新推荐文章于 2024-06-16 09:44:23 发布
最新推荐文章于 2024-06-16 09:44:23 发布
阅读量394 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GYHHelloWold/article/details/106946659
版权

适用于移动端，项目做了移动端的自适配

html文件

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=no">
  <title>sing2</title>
  <!-- <link rel="stylesheet" href="addicon/iconfont.css" /> -->
  <link rel="stylesheet" href="signature.css" />
  <script type="text/javascript" src="signature.js"></script>
</head>

<body>
</body>

</html>

css文件

body,p,dl,dd,ul,ol,li,div,h1,h2,h3,h4,h5,h6,form,input,table,tr,td{
	margin:0;
	padding:0;
}
html{
  font-size: 26.67vw;
}
html,body,.cancas-cont{
  height: 100%;
  height: 100%;
  font-size: 1rem;
}
ul,ol{
	list-style:none;
}
img{
	border: 0;
	display: block;
}
a{
	text-decoration: none;
	display: block;
}
span{
  display: block;
}
.cancas-cont{
  display: flex;
	flex-direction: column;
}
.sign-footer{
  width: 100%;
  height: 2rem;
  position: fixed;
  top: 0;
}
.sign-footer{
  display: flex;
}
.sign-footer,.sign-header{
  background-color: #fff;
}
.cell-top,.cell-bottom{
  display: flex;
  flex-direction: row-reverse;
  width: 50%;
  height: 2rem;
  text-align: center;
  border-bottom: 1px solid #d0cccc;
  position: relative;

}
.cell-bottom{
  border-left: 1px solid #d0cccc;
}
.cell-bottom span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: 1rem;
  color: #72f572;
}
.cell-top span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: 1rem;
  color: #cc1313;
}



/* 画布 */
.sign-context{
  width: 100%;
height: 100%;
overflow: hidden;
}
/* canvas{
  width: 100%;
  height: 100%;
} */


.sign-header{
  position: fixed;
  bottom: 0;
  height: 2rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #d0cccc;
  width: 100%;
}
.title{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: 1rem;
}
.close-con{
  margin-right: .4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

javascript文件

 function Signature (param) {
  this.param = param;
  this.init();
  this.paintInit({});
  this.addListener();

};
/**
 * 对象初始化
 */
Signature.prototype.init = function () {
  var clientWidth = document.body.clientWidth || document.documentElement.clientWidth;
  var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
  var con = document.createElement('div');
  con.id = 'sign-con';
  con.className = 'sign-con';
  con.style.height = clientHeight + 'px';
  document.body.appendChild(con);
  var arcHtml =
    `<div class="cancas-cont">
        <div class="sign-footer">
          <div class="cell-top"><span id="rewrite">重写</span></div>
          <div class="cell-bottom"><span id="signcommit">提交</span></div>
        </div>
        <div class="sign-context" id="sign-context"><canvas id="sign-canvas"></canvas></div>
        <div class="sign-header">
          <div></div>
          <span class="title" id="sign-title">电子签名</span>
          <div class="close-con" id="sign-close"><i class="addiconfont icon-123"></i></div>
        </div>
      </div>`
  con.innerHTML = arcHtml;
  this.con = con;
  this.canvas = document.getElementById('sign-canvas');
  this.ctx = this.canvas.getContext('2d');
  var clientWidth = document.documentElement.clientWidth;
  var clientHeight = document.documentElement.clientHeight;
  var canvasWidth = Math.floor(clientWidth);
  var canvasHeight = Math.floor(clientHeight);
  this.canvas.setAttribute('width', canvasWidth + 'px');
  this.canvas.setAttribute('height', canvasHeight + 'px');
};
//设置监听事件
Signature.prototype.addListener = function () {
  var _this = this;
  var point = {
    boxTop: 0,
    boxLeft: 0,
    startX: 0,
    startY: 0,
  };
  var eventObj = {
    touchStart: function (ev) {
      ev.preventDefault();
      var box = _this.canvas.getBoundingClientRect();
      var targetTouch = ev.targetTouches[0];
      point.boxTop = box.top;
      point.boxLeft = box.left;
      point.startX = targetTouch.clientX;
      point.startY = targetTouch.clientY;
      _this.ctx.beginPath();
      _this.ctx.moveTo(point.startX - point.boxLeft, point.startY - point.boxTop);
      _this.ctx.lineTo(targetTouch.clientX - point.boxLeft, targetTouch.clientY - point.boxTop);
      _this.ctx.stroke();
    },
    touchMove: function (ev) {
      ev.preventDefault();
      var targetTouch = ev.targetTouches[0];
      _this.ctx.beginPath();
      _this.ctx.moveTo(point.startX - point.boxLeft, point.startY - point.boxTop);
      _this.ctx.lineTo(targetTouch.clientX - point.boxLeft, targetTouch.clientY - point.boxTop);
      _this.ctx.stroke();
      point.startX = targetTouch.clientX;
      point.startY = targetTouch.clientY;
    },
    //提交/重写
    controlEvent: function (ev) {
      var targetId = ev.target.id;
      if (targetId == 'sign-close') {
        alert("路由跳转")
      } else if (targetId == 'rewrite') {
        _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
      } else if (targetId == 'signcommit') {
        if (maxX - minX <= 100 || maxY - minY <= 300) {
          alert("亲，签名太小啦，请重新输入嘛！！！")
          _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
          return
        }
        var signData = _this.canvas.toDataURL();
        _this.param.cb.call(null, signData);
      };
    }
  };
  this.eventObj = eventObj;
  this.canvas.addEventListener('touchstart', eventObj.touchStart, false);
  this.canvas.addEventListener('touchmove', eventObj.touchMove, false);
  this.con.addEventListener('click', eventObj.controlEvent, false);
};
/**
 * 画笔初始化
 * @param {Object} opt
 */
Signature.prototype.paintInit = function (opt) {
  var paintOpt = opt || {};
  this.ctx.lineJoin = 'round';
  this.ctx.lineCap = 'round';
  this.ctx.strokeStyle = opt.strokeStyle || '#000';
  this.ctx.lineWidth = opt.lineWidth || 3;

};
//移除监听
Signature.prototype.removeListener = function () {
  this.canvas.removeEventListener('touchstart', this.eventObj.touchStart);
  this.canvas.removeEventListener('touchmove', this.eventObj.touchMove);
  this.con.removeEventListener('click', this.eventObj.controlEvent);
};
//关闭签名器
Signature.prototype.close = function () {
  this.removeListener();
  document.body.removeChild(this.con);
};
let arrX = []
let arrY = []
let maxX
let minX
let maxY
let minY
window.onload = function () {
  var sign = new Signature({
    cb: function (signData) {
      let baseAcreage =
        (maxX - minX) *
        (maxY - minY);
      let canvasAcreage = document.getElementById('sign-canvas').width * document.getElementById('sign-canvas').height;
      if (canvasAcreage / baseAcreage >= 4) {
        alert("亲，签名太小啦，请重新签名嘛！！！");
        document.getElementById('rewrite').addEventListener('click', sign.eventObj.controlEvent, false);
      } else {
        dealImage(signData, 200, (callback) => {
          console.log(callback)
        })
      }
      function dealImage (base64, w, callback) {
        var newImage = new Image();
        var quality = 0.6;    //压缩系数0-1之间
        newImage.src = base64;
        newImage.setAttribute("crossOrigin", 'Anonymous');	//url为外域时需要
        var imgWidth, imgHeight;
        newImage.onload = function () {
          imgWidth = this.width;
          imgHeight = this.height;
          var canvas = document.createElement("canvas");
          var ctx = canvas.getContext("2d");
          if (Math.max(imgWidth, imgHeight) > w) {
            if (imgWidth > imgHeight) {
              canvas.width = w;
              canvas.height = w * imgHeight / imgWidth;
            } else {
              canvas.height = w;
              canvas.width = w * imgWidth / imgHeight;
            }
          } else {
            canvas.width = imgWidth;
            canvas.height = imgHeight;
            quality = 0.6;
          }
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
          var base64 = canvas.toDataURL("image/png", quality); //压缩语句
          callback(base64)
        }
      }
      sign.removeListener();
    },
  })
  var pad = document.getElementById('sign-context');
  pad.addEventListener('touchmove', function (e) {
    var ev = e || window.event;
    var touch = ev.targetTouches[0];
    arrX.push(touch.clientX)
    arrY.push(touch.clientY)
    maxX = Math.max.apply(null, arrX);
    minX = Math.min.apply(null, arrX);
    maxY = Math.max.apply(null, arrY);
    minY = Math.min.apply(null, arrY);
  });
}
功夫熊猫式浪漫style
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript 手写电子签名
05-10
javascript手写电子签名生成图片
一个支持多终端的电子签名
03-29
描述进一步指出，该电子签名方案是基于JavaScript（js）实现的，并且兼容不同的开发模式，包括Webpack开发模式和传统的原生JavaScript及jQuery环境。 在深入探讨这个电子签名系统之前，我们首先理解什么是电子签名...
js 手写电子签名
weixin_44937771的博客
07-18 2509
js 手写签名
推荐项目：XAdESjs，电子签名领域的JavaScript解决方案
最新发布
gitblog_00018的博客
06-16 770
推荐项目：XAdESjs，电子签名领域的JavaScript解决方案 项目地址:https://gitcode.com/PeculiarVentures/xadesjs 在数字时代，确保文档的完整性和来源的真实性变得至关重要，这正是【XAdESjs】大显身手的舞台。XAdESjs是一个基于TypeScript/JavaScript编写的库，旨在实现XML Advanced Electronic S...
使用jSignature.js实现电子签名
weixin_45740068的博客
02-22 592
【代码】使用jSignature.js实现电子签名。
电子签名类 js类
chuohe6087的博客
07-21 264
'use strict'; /* signer.js 签名类 iger <macore@163.com> 2019-03-16 18:46:34 */ class Signer { constructor(id) { this.canvas = docume...
JS如何实现电子签名
qq_41060065的博客
06-10 1万+
这里写自定义目录标题JS实现电子签名 JS实现电子签名 最近在做一个在线考核的项目，其中有一个需求是考核完毕后在录入成绩时需要进行签名，签名后要在表单显示出来并且进行成绩单的打印 其实思路已经很明显了。 1.第一步先生成画板 2.第二步在画板中进行签名写字 3.第三步点击提交上传图片（base64编码）到服务器 4.第四步服务器接收后转码转成图片（png/img）后，先存到本地静态资源服务器 5.把地址信息存到数据库中 思路大概就是这个思路，有个细节就是在转码转成图片时，如果转成img格式的那么背景就会是黑
js实现签名功能（vue中使用电子签名）
热门推荐
qq_45585640的博客
10-20 2万+
开始电子签名，需要在vue.config.js中配置jquery插件，否则jq-signature会报错：jQuery is undefined。安装jq及js-signature(js-siganture依赖于jquery)最后生成一个以base64位的图片。jquery两种使用方式。
JS实现网页签名(生成任意格式png、JPG等)
06-10
本项目通过JavaScript技术实现了网页上的电子签名功能，并能够生成多种格式（如PNG、JPG）的签名图像。以下是对这个项目的详细解析： 1. **JavaScript**： JavaScript是网页开发中的核心语言之一，它负责处理用户...
H5 电子签名[jSignature实现]
01-27
jSignature是一款轻量级的JavaScript库，专为H5环境设计，能够帮助开发者轻松地添加电子签名功能到网页应用中。 一、jSignature核心概念与原理 1. 笔迹捕捉：jSignature通过监听用户的触摸或鼠标事件，记录用户在...
微信小程序canvas画板手写签名
03-12
这一技术的核心在于利用小程序的canvas原生组件，结合JavaScript来实现画布上的各种交互操作。 首先，我们需要理解微信小程序中的`<canvas>`组件。它是HTML5的一个重要元素，用于在网页上绘制图形。在微信小程序中...
pdfjs预览显示电子签名
07-26
PDFJS预览pdf时无法显示电子签名，亲测本方案完美解决
javascript手写签名
11-03
jSignature生成签名，鼠标一点就可以签名 帮忙你的项目生成个性化的名称
JS实现网页上签名
03-23
jSignature 在网页上手写签名的插件(html5手写签名) 在IE7~IE8这种不支持HTML5的浏览器上，是利用Flash嵌入的方式实现的签名处理; 在支持的HTML5的浏览器上默认采用canvas标签处理签名，可以生成 PNG格式、SVG格式的签名图片。 非常适合在IPAD等移动客户端上实现手写签名的，该插件基于JQuery
微信小程序实现签字功能
10-15
在微信小程序中实现签字功能是一项常见的需求，尤其在电子签名或在线合同签署场景下。本文将详细介绍如何在微信小程序中创建这样一个功能，并提供相应的代码示例。 首先，我们需要理解微信小程序实现签字的核心技术...
电子签名(js)
mumu42的博客
03-27 852
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head &gt;    &lt;meta charset="utf-8"&gt;    &lt;title&gt;&lt;/title&gt;    &lt;style type="text/css"&gt;        #canvas {            border: t
原生JS使用canvas实现网页电子签名
weixin_46605992的博客
07-27 532
利用h5新标签canvas，配合原生js，实现电子签名的下载
JS的canvas简易功能:电子签名
qq_53593647的博客
01-10 232
分享canvas简易电子签名!刚学习到!
teamcenter的电子签名功能的handler开发
02-11
Teamcenter 的电子签名功能是通过一个叫做 handler 的组件来实现的。开发这样的 handler 需要一定的编程技巧，并对 Teamcenter 系统的工作原理有一定的了解。 在开发这个 handler 时，首先需要确定所需要实现的功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值