电子签名(js)

最新推荐文章于 2024-06-16 09:44:23 发布
最新推荐文章于 2024-06-16 09:44:23 发布
阅读量864 收藏
点赞数
分类专栏： 经典案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mumu42/article/details/79713389
版权
<!DOCTYPE html>
<html>
<head >
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #canvas {
            border: thin solid blue;
        }
    </style>
    <script src="qm/jquery.min.js"></script>
</head>


<body >
    
        <button type="button" οnclick="overwrite()">重写</button>
        <button type="button" οnclick="submit()">提交签名</button>
        <canvas id="canvas" width="600" height="600"></canvas>
    <script type="text/javascript">
        var context;
        window.onload = function () {

            var device =

             /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase());

            var startEvtName = device ? "touchstart" : "mousedown";
            var moveEvtName = device ? "touchmove" : "mousemove";
            var endEvtName = device ? "touchend" : "mouseup";


            var canvas = document.getElementById("canvas");
            canvas.height = window.screen.height - 500; //canvas的宽高必须在js在设置，在css中设置大小是缩放效果
            canvas.width = window.screen.width;
            context = canvas.getContext("2d");

            console.log(context);


            var isdown = false;

            canvas.addEventListener(moveEvtName, function (e) {
                if (!isdown) return;
                var location;
                if (device) {
                    location = getLocation(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
                } else {
                    location = getLocation(e.clientX, e.clientY);
                }
                points[points.length] = location;
                context.beginPath();
                context.moveTo(downlocation.x, downlocation.y);
                context.lineTo(location.x, location.y);
                context.stroke();
                context.closePath();
                downlocation = location;
            }, false);

            var downlocation;
            canvas.addEventListener(startEvtName, function (e) {
                isdown = true;


                if (device) {
                    downlocation = getLocation(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
                } else {
                    downlocation = getLocation(e.clientX, e.clientY);
                }
                console.log(downlocation)
            }, false);
            canvas.addEventListener(endEvtName, function (e) {
                isdown = false;
                points[points.length] = { x: -1, y: -1 };
                console.log(points);
            }, false);
        }
        var points = [];
        function submit() {
            var ps = '';
            for (var i = 0; i < points.length; i++) {
                ps += points[i].x.toFixed(2) + ',' + points[i].y.toFixed(2) + ','
            }
            $.post('/Contract/UpLoadQM', 'PointList=' + ps, function (date) {


            });
        }

        function overwrite() {
            if (context) context.clearRect(0, 0, canvas.width, canvas.height);
            points = [];
        }

        function getLocation(x, y) {
            var bbox = canvas.getBoundingClientRect();
            return {
                x: (x - bbox.left) * (canvas.width / bbox.width),
                y: (y - bbox.top) * (canvas.height / bbox.height)
            };
        }

    </script>
</body>


</html>
mumu42
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mini-smooth-signature.js：小程序canvas带笔锋手写签名，支持微信/支付宝/钉钉/QQ等多平台小程序使用
ljc310的博客
10-26 1102
mini-smooth-signature.js：小程序canvas实现带笔锋手写签名，支持微信/支付宝/钉钉/QQ等多平台小程序使用。​ 受疫情的影响，无纸化流程和电子合同开始普及，电子签名需求也不断增加，签名体验也在逐渐改善，从一开始简单的canvas画线，到追求线条丝滑圆润，再到要求和纸上写字一样的笔锋效果等等。网上不少现成开源的签名库，其中signature_pad笔锋效果实现比较好，但具体使用还是会发现有明显的锯齿感，于是利用工作之余，重新实现一套。
javascript 手写电子签名
05-10
JavaScript手写电子签名技术是一种在Web应用中实现用户签名功能的方法，它允许用户通过鼠标或触摸设备在屏幕上绘制签名，并将其保存为图像。这一技术在电子商务、在线合同签署等领域广泛应用，提高了业务流程的效率...
轻松三步制作电子签名
振华OPPO的博客世界
03-01 2861
三、点击图片，先选择【图片工具】中的【设置透明色】，然后点击签名之外的图片背景，即可制作为矢量图；再调节亮度来调节签名的明暗，最后另存为图片即可。二、新建空白word文档，使用WPS方式打开，再将图片复制进来。一、在纸上签名，并且拍照。
推荐项目：XAdESjs，电子签名领域的JavaScript解决方案
最新发布
gitblog_00018的博客
06-16 774
推荐项目：XAdESjs，电子签名领域的JavaScript解决方案 项目地址:https://gitcode.com/PeculiarVentures/xadesjs 在数字时代，确保文档的完整性和来源的真实性变得至关重要，这正是【XAdESjs】大显身手的舞台。XAdESjs是一个基于TypeScript/JavaScript编写的库，旨在实现XML Advanced Electronic S...
电子签名能用到哪些格式上
happyqwz的专栏
03-28 2073
这个需要辩证的来看，但是整体而言，电子签名可以用到WORD、EXCEL、图片等各种载体，但是下载之后，最终都会以PDF形式输出。 主要有以下两点分析： 首先，PDF是电子签名的载体。具有电子签名的电子文档大多是以PDF的格式展现的。这主要也是因为相比其他电子文档格式，PDF的防篡改性和美观性更高，且PDF可以验证电子签名的有效性。PDF格式的电子合同属《合同法》所规定的书面合同：《...
word生成电子签名
知本知至的博客
11-08 4306
word生成电子签名
JS如何实现电子签名
qq_41060065的博客
06-10 1万+
这里写自定义目录标题JS实现电子签名 JS实现电子签名 最近在做一个在线考核的项目，其中有一个需求是考核完毕后在录入成绩时需要进行签名，签名后要在表单显示出来并且进行成绩单的打印 其实思路已经很明显了。 1.第一步先生成画板 2.第二步在画板中进行签名写字 3.第三步点击提交上传图片（base64编码）到服务器 4.第四步服务器接收后转码转成图片（png/img）后，先存到本地静态资源服务器 5.把地址信息存到数据库中 思路大概就是这个思路，有个细节就是在转码转成图片时，如果转成img格式的那么背景就会是黑
手写签名插件—jSignature使用心得
热门推荐
bluelotos893的博客
12-27 3万+
最近需要做一个移动端手写签名的功能，上网搜了一下基本都是jSignature这个插件，几乎没得第二选择，于是照着网上的各个版本copy测试，在PC端测试是没什么问题的，很easy。     问题1：:在移动端改变了canvas的父盒子大小后就出现问题了，手写的和显示的不在一起，jSignature画笔出现了偏移，经过审查元素发现，是由于canvas的尺寸大小变成了100%引起的，解决办法就是需要
H5电子签名.zip
03-09
"esign.js"是这个项目的主JavaScript文件，其中包含了实现电子签名功能的代码。这部分代码可能包括监听Canvas上的鼠标或触屏事件，跟踪用户的笔迹，以及将签名保存为图像等逻辑。当用户点击“确认”按钮时，签名图像...
H5手写电子签名.rar
06-23
`esign.js`是项目的核心JavaScript文件，它实现了手写电子签名的功能。这个脚本可能会监听canvas的鼠标或触摸事件，记录用户的手绘轨迹，并在canvas上实时绘制。当用户点击“确认”按钮时，脚本会将canvas的内容转换...
HTML5+JS电子签名
11-04
总结来说，HTML5+JS电子签名是通过HTML5的Canvas元素、JavaScript（如jQuery）和触摸事件来实现的一种交互式签名解决方案。它提供了一种方便、高效且跨平台的方法，让用户能够在网页上进行手写签名，适应了数字化...
vue签名组件-移动
06-13
此组件为单独组件，通过components引入即可使用，根据项目需求自行配置编写样式
非常简单的手写板JS
02-16
手写板JS，多用在一些需要手写签字或者签署意见的系统中，该JS，只需要按照压缩文件里面的列子，当用鼠标写一些文字的时候，会生成一段字母代码，将这些代码存入数据库中，打开的时候，从数据库中将这些代码读出来，根据相应的格式就可以将手写的东西显示到网页中
HTML5 canvas实现电子签名
04-06
NULL 博文链接：https://topmanopensource.iteye.com/blog/1544126
PHP+JS+jSignature在线手写电子签名实例
07-02
在这个技术实例中，我们将探讨如何使用PHP、JavaScript（JS）和jSignature库来实现一个在线手写电子签名的功能。jSignature是一个轻量级的JavaScript库，它允许用户在网页上进行手写签名，非常适合于电子商务、合同...
nodejs把前端canvas传来的base图片存在服务器上实现电子签名效果。
SilenceJude的博客
01-20 828
router.post('/upload', function (req, res) { //接收前台POST过来的base64 var imgData = req.body.imgData; //过滤data:URL var base64Data = imgData.replace(/^data:image\/\w+;base64,/, &amp;quot;&amp;quot;); var dataBuffer...
js实现电子签名功能
huaweichenai的博客
07-11 1084
电子签名
js 手写电子签名
weixin_44937771的博客
07-18 2513
js 手写签名
通用审批节点的实现
weixin_33672109的博客
10-10 964
很多人认为，工作流就是做审批流，上工作流系统，就是为了处理审批流。这显然是个误区，大概是给大量的oa办公系统给闹的，那套oa系统不包含一个审批流？ 一套工作流系统，包含流程引擎，流程设计器，流程管理中心，甚至自定义表单。流程引擎封装好抽象的业务流程模型，流转和实现，对外提供api函数接口；流程设计器可视化的给业务流程建模，设计流程模版；流程管理中心，能模拟流程的运转，跟踪和监控流程实例；自定义表...
uniapp 图片电子签名
09-15
在 Uniapp 中进行图片电子签名可以通过以下步骤实现: 1. 首先，你需要在你的 Uniapp 项目中安装相应的插件。你可以通过在终端中执行以下命令来安装 uni-image-cropper 插件： ``` npm install uni-image-cropper ``` 2. 然后，在需要进行图片电子签名的页面中引入该插件： ```javascript import uniImageCropper from '@/uni_modules/uni-image-cropper/js_sdk/uni-image-cropper.js' ``` 3. 在页面中添加一个按钮，用于触发图片电子签名功能： ```html <template> <view> <button @click="openCropper">打开图片电子签名</button> </view> </template> ``` 4. 在页面的 methods 中定义 openCropper 方法，用于打开图片电子签名功能： ```javascript methods: { openCropper() { uniImageCropper.open({ width: 300, height: 200, success: (res) => { console.log(res.tempFilePath) // 获取生成的电子签名图片路径 } }) } } ``` 通过以上步骤，你可以在 Uniapp 中实现图片电子签名功能。当用户点击打开图片电子签名按钮后，会弹出一个画板供用户进行签名，在用户完成签名后，可以获取生成的电子签名图片路径进行后续操作。注意，具体的界面样式和交互可以根据你的需求进行自定义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值