当前位置: 首页 > news >正文

利用 HTML5 Canvas 实现在线签字功能

目录

前言

一、HTML5 Canvas 简介

二、签字功能的实现

效果演示

完整代码


前言

        在现代互联网应用中,有时我们需要让用户在网页上进行签字操作,比如确认文件、填写电子表格或者签署合同。利用 HTML5 的 canvas 画布,我们可以轻松地实现这一功能,为用户提供方便快捷的在线签字体验。

一、HTML5 Canvas 简介

HTML5 的 canvas 元素是一种强大的图形渲染工具,它允许开发者使用 JavaScript 在网页上绘制各种图形、动画和交互式内容。通过 canvas,开发者可以创建丰富多彩的视觉效果,并实现复杂的用户交互体验。

HTML5 Canvas的关键特性:

  1. 图形绘制能力:Canvas 元素提供了绘制路径、矩形、圆形、直线、文本等基本图形的功能,同时还支持图像的绘制和变换操作,使得开发者能够轻松地创建各种视觉效果。

  2. 动画和交互:借助 JavaScript,开发者可以在 Canvas 上创建复杂的动画效果,并添加交互式的操作。这使得 Canvas 成为开发游戏、数据可视化和其他需要动态效果的应用的理想选择。

  3. 性能优势:由于 Canvas 是基于 GPU 加速的,因此它具有良好的性能表现,能够处理大量的图形元素和动画效果,而不会对页面的整体性能产生太大影响。

  4. 灵活性:Canvas 元素可以轻松地与其他 HTML 元素结合使用,使得开发者可以在页面上创建复杂的混合媒体效果,同时还可以响应用户的交互操作。

二、签字功能的实现

效果演示

完整代码

HTML代码

<!DOCTYPE html>
<html class="no-js">
<head><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no,viewport-fit=cover"><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache" content="no-cache"><meta http-equiv="Expires" content="0"><meta charset="utf-8"><title>画图</title><link rel="stylesheet" href="css/bootstrap.css"><style>* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;text-align: center;}canvas {max-width: 100%;border: 2px dotted #ccc;}</style>
</head><body><script src="./index.js"></script><script>//初始化var sign = new Draw( {// canvas:document.getElementById('canvas'),lineWidth: 10, // 线条宽度width: 400, // canvas 宽height: 400, //canvas 高strokeStyle: '#333333' // 线条颜色} );window.onload = function () {// 点击输出图片document.querySelector( '.ouput' ).onclick = function () {var img = new Image();img.style.width = '200px';img.src = sign.ouput();img.onload = function () {document.body.appendChild( img );}document.querySelector( 'img' ) && document.querySelector( 'img' ).remove();}// 点击清除document.querySelector( '.clear' ).onclick = function () {sign.clear();}// 点击撤销document.querySelector( '.undo' ).onclick = function () {if ( sign.state.undopath.length > 0 ) {sign.undo();} else {console.log( '还没有签名' );}}}</script><div class="buttons"><button type="button" class="btn btn-primary ouput">生成图片</button><button type="button" class="btn btn-light undo">撤销</button><button type="button" class="btn btn-light clear">清除画布</button></div>
</body></html>

js代码

( function ( global, factory ) {typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :typeof define === 'function' && define.amd ? define( factory ) :( global = global || self, global.Draw = factory() );
}( this, ( function () {'use strict';var classCallCheck = function ( instance, Constructor ) {if ( !( instance instanceof Constructor ) ) {throw new TypeError( "Cannot call a class as a function" );}};var createClass = function () {function defineProperties ( target, props ) {for ( var i = 0; i < props.length; i++ ) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ( "value" in descriptor ) descriptor.writable = true;Object.defineProperty( target, descriptor.key, descriptor );}}return function ( Constructor, protoProps, staticProps ) {if ( protoProps ) defineProperties( Constructor.prototype, protoProps );if ( staticProps ) defineProperties( Constructor, staticProps );return Constructor;};}();/*** * @description  手写签字版*/var Draw = function () {function Draw () {var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};classCallCheck( this, Draw );this.el = params.el || document.createElement( 'canvas' );this.state = {undopath: [],index: -1,old: void 0,isStart: false,width: params.width || 400,height: params.height || 400,lineWidth: params.lineWidth || 1,isTouch: 'ontouchstart' in window,strokeStyle: params.strokeStyle || '#333333'};var _state = this.state,width = _state.width,height = _state.height,lineWidth = _state.lineWidth;this.el.width = width * 2;this.el.height = height * 2;document.body.appendChild( this.el );this.ctx = this.el.getContext( '2d' );this.ctx.scale( 2, 2 );this.ctx.lineWidth = lineWidth;this.ctx.lineJoin = 'round';this.ctx.lineCap = 'round';this.init();}createClass( Draw, [{key: 'onStart',value: function onStart () {++this.state.index;this.state.isStart = true;}}, {key: 'onMove',value: function onMove ( e ) {e.preventDefault();if ( !this.state.isStart ) return;var pos = this.pos( e );var index = this.state.index;this.ctx.strokeStyle = this.state.strokeStyle;if ( this.state.old ) {this.ctx.beginPath();this.ctx.moveTo( this.state.old.x, this.state.old.y );this.ctx.lineTo( pos.x, pos.y );this.ctx.stroke();}this.state.old = pos;if ( this.state.undopath[index] ) {this.state.undopath[index].push( { x: this.state.old.x, y: this.state.old.y } );} else {this.state.undopath[index] = [{x: this.state.old.x,y: this.state.old.y,strokeStyle: this.ctx.strokeStyle,lineWidth: this.ctx.lineWidth}];}}}, {key: 'onEnd',value: function onEnd () {this.state.old = void 0;this.state.isStart = false;}}, {key: 'pos',value: function pos ( e ) {var x = 0,y = 0;if ( e.touches ) {x = e.touches[0].pageX;y = e.touches[0].pageY;} else {x = e.offsetX / 2;y = e.offsetY / 2;}return { x: x, y: y };}}, {key: 'ouput',value: function ouput () {// 输出图片return this.el.toDataURL();}}, {key: 'init',value: function init () {// 绑定事件var isTouch = this.state.isTouch;this.el.addEventListener( isTouch ? 'touchstart' : 'mousedown', this.onStart.bind( this ), false );this.el.addEventListener( isTouch ? 'touchmove' : 'mousemove', this.onMove.bind( this ), false );this.el.addEventListener( isTouch ? 'touchend' : 'mouseup', this.onEnd.bind( this ), false );this.el.addEventListener( isTouch ? 'touchcancel' : 'mouseout', this.onEnd.bind( this ), false );}}, {key: 'destroyed',value: function destroyed () {if ( this.el ) {var isTouch = this.state.isTouch;this.el.removeEventListener( isTouch ? 'touchstart' : 'mousedown', this.onStart.bind( this ) );this.el.removeEventListener( isTouch ? 'touchmove' : 'mousemove', this.onMove.bind( this ) );this.el.removeEventListener( isTouch ? 'touchend' : 'mouseup', this.onEnd.bind( this ) );this.el.removeEventListener( isTouch ? 'touchcancel' : 'mouseout', this.onEnd.bind( this ) );}}}, {key: 'clear',value: function clear () {// 清除画布this.state.index = -1;this.state.undopath = [];this.ctx.clearRect( 0, 0, this.el.width, this.el.height );}}, {key: 'undo',value: function undo () {// 撤销this.state.index >= 0 && --this.state.index;var undopath = this.state.undopath;this.state.undopath.pop();this.ctx.clearRect( 0, 0, this.el.width, this.el.height );if ( undopath ) {this.ctx.beginPath();for ( var z = 0; z < undopath.length; ++z ) {this.ctx.moveTo( undopath[z][0].x, undopath[z][0].y );this.ctx.lineWidth = undopath[z][0].lineWidth;this.ctx.strokeStyle = undopath[z][0].strokeStyle;for ( var i = 0; i < undopath[z].length; ++i ) {this.ctx.lineTo( undopath[z][i].x, undopath[z][i].y );}}this.ctx.stroke();this.ctx.closePath();} else {this.state.undopath = [];}}}] );return Draw;}();return Draw;} ) ) );

相关文章:

利用 HTML5 Canvas 实现在线签字功能

目录 前言 一、HTML5 Canvas 简介 二、签字功能的实现 效果演示 完整代码 前言 在现代互联网应用中&#xff0c;有时我们需要让用户在网页上进行签字操作&#xff0c;比如确认文件、填写电子表格或者签署合同。利用 HTML5 的 canvas 画布&#xff0c;我们可以轻松地实现这一…...

GaussDB技术解读——GaussDB架构介绍(二)

上篇图文&#xff0c;从GaussDB关键架构目标、GaussDB分布式架构、数据计算路由层&#xff08;Coordinator&#xff09;关键技术方案等三方面对GaussDB架构进行了介绍。本篇将从数据持久化存取层(DataNode)关键技术方案、全局事务管理层&#xff08;GTM&#xff09;关键技术方案…...

EfficientNet详解

原论文名称&#xff1a;EfficientNet: Rethinking Model Scaling for Convolutional Neural Networks 论文下载地址&#xff1a;https://arxiv.org/abs/1905.11946 原论文提供代码&#xff1a;https://github.com/tensorflow/tpu/tree/master/models/official/efficientnet 自己…...

UI前端交互的艺术:探索设计的四个维度、五个层面、六个要点与七大原则

UI前端交互的艺术&#xff1a;探索设计的四个维度、五个层面、六个要点与七大原则 在数字时代的浪潮中&#xff0c;UI前端交互设计如同一门深邃的艺术&#xff0c;既需要技术支撑&#xff0c;又需要设计灵感。它关乎用户体验&#xff0c;影响着产品的成败。那么&#xff0c;UI…...

java接口设计需要考虑哪些方面

1.签名 目的&#xff1a;防止数据被篡改 &#xff08;1&#xff09;接口请求方将请求参数、时间戳和密钥拼接成一个字符串。 &#xff08;2&#xff09;使用MD5等hash算法生成签名。 &#xff08;3&#xff09;在请求参数或请求头中增加sign参数传递给API接口。 &#xff08;4&…...

Opencv图像处理

Opencv图像处理 图像阈值处理 图像阈值的处理通过cv2.threshold函数来进行处理&#xff0c;该函数的具体说明如下所示 ret, dst cv2.threshold(src, thresh, maxval, type) src&#xff1a; 输入图&#xff0c;只能输入单通道图像&#xff0c;通常来说为灰度图 dst&#x…...

LeetCode | 2879.显示前三行

在 pandas 中&#xff0c;可以使用 head() 方法来读取 DataFrame 的前几行数据。如果想读取指定数量的行&#xff0c;可以在 head() 方法中传入一个参数 n&#xff0c;读取前 n 行 import pandas as pddef selectFirstRows(employees: pd.DataFrame) -> pd.DataFrame:retur…...

Qt实现简易播放器

效果如图 源码地址&#xff1a; 简易播放器: 基于Qt的简易播放器&#xff0c;底层采用VLC源码 - Gitee.com GitHub:GitHub - a-mo-xi-wei/easy-player: 基于Qt的调用VLC的API的简易播放器...

适配Android12启动页

今天我们讲个什么话题呢&#xff1f;我们今天讲的内容是&#xff0c;Android12新启动页的支持API。 启动页我想大家都不陌生吧&#xff0c;通常的写法就是先创建一个SplashActivity&#xff0c;在onCreate中 Handler(Looper.getMainLooper()).postDelayed({// 在这里跳转主界…...

人工智能在医学领域的应用及技术实现

欢迎来到 Papicatch的博客 目录 &#x1f349;引言 &#x1f349; 医学影像分析 &#x1f348;技术实现 &#x1f34d;数据准备 &#x1f34d;模型构建 &#x1f34d;模型训练 &#x1f34d;模型评估 &#x1f34d;应用部署 &#x1f348;示例代码 &#x1f349; 基因…...

MySQL—多表查询—练习(1)

一、引言 上几篇关于多表查询的基本几个部分全部学习完了。 多表查询的基本类型的查询包括以下&#xff1a; 1、内连接&#xff08;隐式内连接、显示内连接&#xff09;&#xff1a;... [INNER] JOIN ... ON 条件; &#xff09; 2、外连接&#xff08;左外连接、右外连接&…...

千益畅行:合法合规的旅游卡服务,打破误解

近期&#xff0c;千益畅行旅游卡服务引起了公众的广泛关注。然而&#xff0c;一些人对该服务存在误解&#xff0c;认为其存在某种欺诈行为。但经过深入了解和全网搜索证据&#xff0c;我们可以确认&#xff0c;千益畅行实际上是一家合法合规的旅游卡服务提供商。 千益畅行旅游…...

【Echarts系列】水平柱状图

【Echarts系列】水平柱状图 序示例数据格式代码 序 为了节省后续开发学习成本&#xff0c;这个系列将记录我工作所用到的一些echarts图表。 示例 水平柱状图如图所示&#xff1a; 数据格式 data [{name: 于洪区,value: 2736},{name: 新民市,value: 2844},{name: 皇姑区,…...

怎样把便签里的内容移到桌面?桌面便签软件使用方法

每次打开电脑&#xff0c;我总是被满屏的文件和图标弄得眼花缭乱。那些记录在各式各样便签里的重要事项&#xff0c;经常被埋没在这信息的海洋中&#xff0c;找起来真是头疼。想必很多人都有过这样的困扰&#xff1a;如何在繁杂的桌面环境中&#xff0c;一眼就看到自己需要提醒…...

量化入门:qmt获取可转债基本信息和行情数据

💻专业版获取可转债数据 今天将展示如何使用Python和QMT来获取可转债的实时数据和财务数据。 🔬 获取可转债基本信息 迅投的券商版和基础版都不支持可转债行情,投研专业版才支持,一年大概5000元。免费的券商版可参考QMT量化入门 投研专业版才有权限调用download_cb_d…...

AVL树 ---(C++)

本篇讲全面的讲解 AVL 树的插入&#xff0c;旋转以及验证 AVL 树的性能&#xff08;本篇未实现删除代码&#xff09;。至于为什么会有 AVL 树&#xff0c;这是因为简单的二叉搜索树并不能直接的保证搜索的效率&#xff0c;因为当我们在二叉搜索树中插入一段有序的序列的时候&am…...

基于spring boot+MySQL 小区物业管理系统-计算机毕设 附源码37236

spring boot 小区物业管理系统 摘 要 在网络信息的时代&#xff0c;众多的软件被开发出来&#xff0c;给用户带来了很大的选择余地&#xff0c;而且人们越来越追求更个性的需求。在这种时代背景下&#xff0c;小区物业只能以客户为导向&#xff0c;以产品的持续创新作为小区物…...

Linux/Ubuntu/Debian常用服务管理命令

Linux/Ubuntu/Debian常用服务管理命令 在 Linux 系统中&#xff0c;服务管理是系统管理员日常维护工作的重要组成部分。通过一些常用的命令&#xff0c;我们可以查看服务状态、启动或停止服务、重启服务等。掌握这些命令&#xff0c;可以让系统管理工作更加高效和便捷。 1. s…...

Maven的三种项目打包方式——pom,jar,war的区别

1、pom&#xff1a;用在父级工程或聚合工程中&#xff0c;用来做jar包的版本控制&#xff0c;必须指明这个聚合工程的打包方式为pom。 聚合工程只是用来帮助其他模块构建的工具&#xff0c;本身并没有实质的内容。具体每个工程代码的编写还是在生成的工程中去写。 对于在父工程…...

[手游] 三色绘恋S Mobile Link

语音合成TTS: 文字转成语音的工具 WPS免登录一键修改器: 去除烦人的登录且能正常使用 故事简介&#xff1a; 深秋的雨季即将到来&#xff0c;正值那个为人所熟知的故事发生的前一年—— 地点&#xff1a;湖北省的重点高中&#xff0c;武汉师贰高校。 新学年开始&#xff0c;各…...

nss刷题(4)

1、[SWPUCTF 2021 新生赛]easyrce <?php error_reporting(0); highlight_file(__FILE__); if(isset($_GET[url])) { eval($_GET[url]); } ?> if(isset($_GET[url])) isset函数用来检测url变量是否存在&#xff1b;$_GET函数获取变量数据 eval($_GET[url]); eval函数用…...

iOS调整collectionViewCell顺序

效果图 原理 就是设置collectionView调整顺序的代理方法&#xff0c;这里要注意一点 调整过代理方法之后&#xff0c;一定要修改数据源&#xff0c;否则导致错乱。 还有就是在collectionView上面添加一个长按手势&#xff0c;在长按手势的不同阶段&#xff0c;调用collectionV…...

【回调函数】

1.回调函数是什么&#xff1f; 回调函数就是⼀个通过函数指针调用的函数。 如果你把函数的指针&#xff08;地址&#xff09;作为参数传递给另⼀个函数&#xff0c;当这个指针被用来调用其所指向的函数 时&#xff0c;被调用的函数就是回调函数。回调函数不是由该函数的实现方…...

找树左下角的值-力扣

本题个人认为不能叫做 找树左下角的值&#xff0c;左下角再怎么说也应当在树的左子树上&#xff0c;本题要求的节点是树最底层最左边的值。 首先想到的解法是对二叉树进行层序遍历&#xff0c;并记录本层第一个节点的值&#xff0c;当层序遍历结束时&#xff0c;此时记录的值即…...

【AI应用探讨】— Gemma2模型应用场景

目录 1. 金融风险管理 2. 营销策略优化 3. 医疗保健领域 4. 供应链管理 5. 人力资源管理 6. 自然语言处理&#xff08;NLP&#xff09; 7. 图像识别 8. 音频信号处理 9. 总结 1. 金融风险管理 场景描述&#xff1a;Gemma 2模型在金融领域可用于预测金融市场的波动性和…...

树二叉树

树 ​ 树是 n&#xff08;n≥0&#xff09;个结点的有限集。当 n 0时&#xff0c;称为空树。在任意一颗非空树中应满足&#xff1a; &#xff08;1&#xff09;有且仅有一个特定的称为根的结点。 &#xff08;2&#xff09;当 n > 1时&#xff0c;其余结点可分为 m&…...

无源晶振振荡电路失效问题分析与解决策略

无源晶振&#xff08;晶体谐振器&#xff09;在电子设备中扮演着至关重要的角色&#xff0c;为数字电路提供稳定的时钟信号。然而&#xff0c;振荡电路一旦失效&#xff0c;可能会导致整个系统运行不正常。晶发电子将从三个主要方面分析无源晶振振荡电路失效的问题&#xff0c;…...

LIMS系统在汽车第三方检测实验室的应用

随着汽车行业的快速发展&#xff0c;汽车第三方检测实验室的工作量不断增加&#xff0c;对实验室的管理效率和数据准确性提出了更高的要求。LIMS系统的引入可以实现实验室的全面数字化管理&#xff0c;提高工作效率&#xff0c;降低运营成本&#xff0c;并提升数据质量与决策支…...

positivessl泛域名https证书

PositiveSSL&#xff0c;作为Sectigo旗下的子品牌&#xff0c;一直以来颁发的https数字证书产品性价比较高&#xff0c;适合大多数个人网站和中小型企业。其中&#xff0c;DV基础型的泛域名https证书以申请简单、颁发速度快、价格低受到众多用户的欢迎。今天就随SSl盾小编了解P…...

MySQL bin-log日志恢复数据

目录 一、开启二进制日志 二、检查二进制日志是否开启 三、使用二进制日志备份和恢复 使用二进制日志备份恢复前先创建备份&#xff1a; 应用二进制日志&#xff1a; 扩展用法&#xff1a; 四、常见命令和操作 五. 使用 mysqlbinlog 工具查看二进制日志 1. 查看二进制…...

网站数据库怎么建立/百度官方平台

恐怕谁也没想到&#xff0c;智能翻译机这样看似小众的产品能引起AI硬件的销售热潮。数据显示&#xff0c;最近在京东预售的搜狗旅行翻译宝在3月19日开售一小时后就被抢购一空。”据悉&#xff0c;搜狗此次销售额破 1000 万&#xff0c;登顶京东该品类冠军。”如果说AlphaGo第一…...

凡科网做网站要钱吗/成都网站seo性价比高

1、前言分页显示是一种非常常见的浏览和显示大量数据的方法&#xff0c;属于web编程中最常处理的事件之一。对于web编程的老手来说&#xff0c;编写这种代码实在是和呼吸一样自然&#xff0c;但是对于初学者来说&#xff0c;常常对这个问题摸不着头绪&#xff0c;因此特地撰写此…...

建站平台社区/口碑优化

我们平时所见的打车app例如&#xff1a;滴滴打车&#xff0c;曹操专车......都是走的JT808协议&#xff0c;有人问为什么呢&#xff1f;小编告诉大家&#xff0c;原因是&#xff1a;国家有关部门规定&#xff0c;所有运营车辆必须接入这样的协议&#xff0c;实时监测车辆信息&a…...

泰兴市网站建设/google优化排名

su [user] 和 su - [user]的区别&#xff1a; su [user]切换到其他用户&#xff0c;但是不切换环境变量&#xff0c;su - [user]则是完整的切换到新的用户环境。 如&#xff1a; [rootrac1 ~]# pwd --当前目录 /root [rootrac1 ~]# su oracle --使用su [user] [oraclerac1 root…...

未来的门户网站/线上推广引流渠道

三维在理解了如何绘制2D元素之后&#xff0c;我们尝试绘制3D元素。 其实多个三角形也能够成四面体&#xff0c;多个长方形也能够成六面体&#xff0c;所以绘制3D元素的时候&#xff0c;只要顶点数量匹配就行了 这里我们尤其注意&#xff0c;我把绘制之前的三个平移和三个旋转单…...

代做网站在哪找活/北京百度竞价托管公司

2020年疫情爆发之初&#xff0c;雷神山和火神山在10天内迅速建立&#xff0c;在这惊人的速度背后&#xff0c;BIM技术功不可没&#xff0c;今天我们就一起来了解下BIM工程师。BIM是什么&#xff1f;BIM的中文名称为&#xff1a;建筑信息模型&#xff08;Building Information M…...