电子签名？玩具罢了！
需要的前置知识：简单的canvas绘制线路过程
let canvas = document.getElementById(id);
//id为canvas标签元素的id，或通过其它方法获取标签
let ctx = canvas.getContext('2d');
//规定为2d绘制图片，即确定为2d画笔
ctx.strokeStyle = "white"
//画笔的颜色为白色
ctx.beginPath();
//开始绘制
ctx.moveTo(lastX, lastY); //画笔落笔的点数，即开始绘制的位置
ctx.lineTo(lineX, lineY); //画笔结束的位置，即结束绘制的位置
ctx.stroke(); //位置填充完毕，绘制线路，即将两个点连在一起了解以上的内容便可以进行电子签名了。
原理：监听鼠标的点击、按下、松开、以及移动事件，根据这些事件绘制路线形成签名，最后将canvas转为图片，然后发给后端就行啦
实现：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>canvas {border: 1px solid #ccc;}img {width: 100px;height: 100px;}</style>
</head><body><canvas id="signature" width="400" height="200" ></canvas><button onclick="fn()">转换图片</button><a href="#" id="download" download="">下载图片</a><!-- 如果不给a标签加#，会导致页面重新刷新，当然你可以去写js代码阻止这个默认行为 -->
</body>
<script>
//初始化画布以及画笔var canvas = document.getElementById('signature');var ctx = canvas.getContext('2d');var flg= false;var lastX = 0;var lastY = 0;canvas.addEventListener('mousedown', function (e) {flg = true;//鼠标按下，flg为true，表示可以进行绘制[lastX, lastY] = [e.offsetX, e.offsetY];//es6新增，交换两个变量的值console.log(lastX, lastY);});canvas.addEventListener('mousemove', function (e) {if (isDrawing) {ctx.strokeStyle = "black"、ctx.beginPath();ctx.moveTo(lastX, lastY);ctx.lineTo(e.offsetX, e.offsetY);ctx.stroke();[lastX, lastY] = [e.offsetX, e.offsetY];}});canvas.addEventListener('mouseup', function (e) {flg= false;});const fn = () => {var dataURL = canvas.toDataURL('image/png');var downloadBtn = document.getElementById('download');downloadBtn.href = dataURL;imgurl.src = dataURLconsole.log('成功');}
</script></html>
相关文章：
电子签名？玩具罢了！
需要的前置知识：简单的canvas绘制线路过程 let canvas document.getElementById(id); //id为canvas标签元素的id，或通过其它方法获取标签 let ctx canvas.getContext(2d); //规定为2d绘制图片，即确定为2d画笔 ctx.strokeStyle "whit…...
【Spring Boot读取配置文件的方式】
Spring Boot 支持多种读取配置文件的方式，常用的方式有以下三种： application.properties： Spring Boot 默认会读取该文件作为应用的配置文件。可以在 src/main/resources 目录下创建该文件，并在其中配置应用的属性。 applicat…...
java学习路线规划
java学习路线规划 一、写在前面 兄弟，我整理了一下关于自己之前学习java的一些方向，给你归纳在这里，有空就来看看，希望对你有帮助。 二、java基础篇 1、认识java 了解java历史，大概看看发展史，安装…...
格密码学习笔记（二）：连续极小、覆盖半径和平滑参数
文章目录最短距离和连续极小值距离函数和覆盖半径格的平滑参数致谢最短距离和连续极小值 除了行列式，格的另一个基本量是格上最短非零向量的长度，即格中最短距离，其定义为 λ1minx,y∈L,x≠y∥x−y∥minz∈L,z≠0∥z∥.\begin{aligned} …...
ios 通过搜索设备MAC地址绑定
最近做了一个物联网项目,涉及到了设备绑定配网这块,需要了解一下iOS BLE与设备绑定的相关知识点,第一次接触蓝牙相关的项目,所以开始熟悉蓝牙的相关信息。没有去深入研究BabyTooth库，只是感觉CoreBluetooth已经让我更好的理解整个流程这个物联网项目的设备绑定流程是…...
Python实现人脸识别，进行视频跟踪打码，羞羞的画面统统打上马赛克
哈喽兄弟们，我是轻松~ 今天我们来实现用Python自动对视频打马赛克前言准备工作代码实战效果展示最后前言 事情是这样的，昨天去表弟家，用了下他的电脑，不小心点到了他硬盘里隐藏的秘密，本来我只需要用几分钟电脑的&…...
vcf bed起始位置是0还是1
VCF 起始位置为1， POS - position: The reference position, with the 1st base having position 1. Positions are sorted numerically, in increasing order, within each reference sequence CHROM. It is permitted to have multiple records with the same POS. Telome…...
Hexo+live2d | 如何把live2d老婆放进自己的博客
参考：Hexo添加Live2D看板娘最新教程live2d-widgetlive2d-widget-models网页/博客Hexo添加live2d游戏角色看板娘,简易添加，碧蓝航线等live2d新型游戏角色模型（moc3）live2d-moc3jsdelivr方法1可以直接去看参考文章的第一部分的第一篇…...
【微信小程序】-- 页面导航 -- 导航传参（二十四）
💌 所属专栏：【微信小程序开发教程】 😀 作 者：我是夜阑的狗🐶 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！ &…...
Pytorch学习笔记#2: 搭建神经网络训练MNIST手写数字数据集
学习自https://pytorch.org/tutorials/beginner/basics/quickstart_tutorial.html 导入并预处理数据集 pytorch中数据导入和预处理主要用torch.utils.data.DataLoader 和 torch.utils.data.Dataset Dataset 存储样本及其相应的标签，DataLoader在数据上生成一个可迭…...
C语言 猜名次、猜凶手、杨辉三角题目详解
猜名次题目：5位运动员参加了10米台跳水比赛，有人让他们预测比赛结果：A选手说：B第二，我第三；B选手说：我第二，E第四；C选手说：我第一，D第二ÿ…...
蚁群算法负荷预测
%% 清空环境变量 clc clear close all format compact %% 网络结构建立 %% 清空环境变量 clc clear close all format compact %% 网络结构建立 %读取数据 dataxlsread(天气_电量_数据.xlsx,C12:J70);%前7列为每个时刻的发电量 最后列为天气 for i1:58 input(i,:)[data…...
ubuntu添加系统服务实现开机root权限运行
需求 开机自动运行程序(或脚本)，需要以root权限运行但不输入密码，也不能将密码写入文件。 环境 Ubuntu 20.04 解决方案 添加系统服务，然后通过systemctl控制。 操作步骤 假设目标程序为/home/xxx/test 1、创建service配置文件 [Unit…...
【阅读笔记】你不知道的Javascript--类与类型委托3
目录类一些常见原理混入行为委托委托理论类与对象更妙的设计与语法类型冷门关键词typeof 防范机制值原生函数访问内部属性类 一些常见原理 在继承或者实例化时，JavaScript 的对象机制并不会自动执行复制行为； 多态：JS 中的多态，…...
文件服务设计
一、需求背景 文件的上传、下载功能是软件系统常见的功能，包括上传文件、下载文件、查看文件等。例如：电商系统中需要上传商品的图片、广告视频，办公系统中上传附件，社交类系统中上传用户头像等等。文件上传下载大致流程为&#…...
【批处理脚本】-1.22-字符串界定符号 ““
"><--点击返回「批处理BAT从入门到精通」总目录--> 共3页精讲（列举了所有字符串界定符号 ""的用法，图文并茂，通俗易懂） 在从事“嵌入式软件开发”和“Autosar工具开发软件”过程中，经常会在其集成开发环境IDE（CodeWarrior，S32K DS，Davinci，…...
【Flutter·学习实践·UI篇】基础且重要的UI知识
前言 参考学习官网：《Flutter实战第二版》 学习前先记住：Flutter 中万物皆为Widget，心中默念3次以上铭记于心。 这一点和开发语言Dart的变量一切皆是对象的概念，相互对应。 Widget 在前面的介绍中，我们知道在Flutt…...
【OpenCV】车牌自动识别算法的设计与实现
写目录一. 🦁 设计任务说明1.1 主要设计内容1.1.1 设计并实现车牌自动识别算法，基本功能要求1.1.2 参考资料1.1.3 参考界面布局1.2 开发该系统软件环境及使用的技术说明1.3 开发计划二. 🦁 系统设计2.1 功能分析2.1.1 车辆图像获取2.1.2 车牌…...
SpringBoot发送邮件
目录1. 获取授权码2. jar包引入3. 配置application4. 代码实现1. 获取授权码 以126邮箱为例，点开设置，选择POP3/SMTP/IMAP 开启POP3/SMTP服务，新增授权密码 扫码二维码，发送要求的短信内容到指定的号码即可，然后会返回…...
BigInteger类和BigDecimal类的简单介绍
文章目录📖前言：🎀BigInteger类和BigDecimal类的由来🎀BigDecimal类的优点🎀BigDecimal类容易引发的错误🏅处理方法📖前言： 本篇博客主要介绍BigInteger类和BigDecimal类的用途及常…...
手游刚开服就被攻击怎么办？如何防御DDoS？
开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
)
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
Python爬虫实战：研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统，可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析：自动解析Markdown文档结构PPT模板分析：分析PPT模板的布局和风格智能布局决策：匹配内容与合适的PPT布局自动…...
DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上，看到基于小智 AI DIY 玩具的演示，感觉有点意思，想着自己也来试试。 如果只是想烧录现成的固件，乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外，还提供了基于网页版的 ESP LA…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间 广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南
精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南 在数字化营销时代，邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天，我们将深入解析邮件打开率、网站可用性、页面参与时…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，社区养老保险系统小程序被用户普遍使用，为方…...