电子签名？玩具罢了！
需要的前置知识：简单的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类的用途及常…...
从CuteCom到代码：手把手教你用I.MX6ULL实现串口双向通信（附完整工程）
从CuteCom到代码：手把手教你用I.MX6ULL实现串口双向通信 在嵌入式开发中，串口通信是最基础也最关键的调试手段之一。无论是简单的日志输出，还是复杂的数据交互，串口都扮演着不可或缺的角色。本文将带你从零开始，在I.MX…...
ARM GICv3虚拟中断控制器架构与ICV_CTLR_EL1寄存器解析
1. ARM GICv3虚拟中断控制器架构概述在ARMv8-A架构的虚拟化环境中，GICv3中断控制器通过引入虚拟CPU接口寄存器组，为虚拟机提供了与原生物理中断处理机制高度一致的虚拟中断体验。这套虚拟寄存器组与物理寄存器组采用相同的编程模型，但在访问控…...
高性能小程序跨框架迁移方案：miniprogram-to-vue3自动化转换架构设计与最佳实践
高性能小程序跨框架迁移方案：miniprogram-to-vue3自动化转换架构设计与最佳实践 【免费下载链接】miniprogram-to-vue3 项目地址: https://gitcode.com/gh_mirrors/mi/miniprogram-to-vue3 随着前端技术生态的快速发展，微信小程序向Vue3/Uniapp3…...
多视角卷积神经网络（MVCNN）如何用二维图像实现三维物体识别？
多视角卷积神经网络（MVCNN）如何用二维图像实现三维物体识别？ 【免费下载链接】mvcnn_pytorch MVCNN on PyTorch 项目地址: https://gitcode.com/gh_mirrors/mv/mvcnn_pytorch 在计算机视觉领域，三维物体识别一直是一个具有…...
嵌入式Linux系统固化：从启动卡制作到eMMC克隆的工程实践
1. 项目概述：从“启动卡”到“系统固化”的工程实践在嵌入式开发、工业控制、边缘计算乃至一些特定的服务器运维场景里，我们经常会遇到一个看似基础却至关重要的需求：如何将一个完整的Linux操作系统，从一张临时的启动介质…...
在PyCharm中上传代码到Gitee仓库
最近学习python，使用pycharm过程中配置远程仓库方式，以gitee为例新建一个项目作为演示点击菜单中的VCS，选择启用版本控制集成弹出的窗口直接点确认在左侧的菜单中找到仓库全选输入提交消息，并点击提交或者提交或推送在弹出的窗口中…...
纺织行业智能化升级进入深水区：AI验布机从“可选项”变为“必选项”
过去三年，走访过数十家纺织服装企业的行业观察者会发现一个明显的变化：2023年时，AI验布机还是展会上引人驻足的新奇设备；到了2025年，它已经成为越来越多工厂标准配置的一部分。这一转变背后，折射出整个纺织…...
AI教材写作神器！低查重AI工具，一键生成符合标准的专业教材！
许多教科书编写者常常会面临这样的困扰：在认真打磨正文内容的同时，配套资源的缺乏却影响到了整体的教学效果。设计有难度的课后练习题时，脑海中却没有多样的创意；想要制作生动的教学课件，却苦于缺乏技术支持࿱…...
)
双边滤波Bilateral_Filter(调参的重要性)
一、双边滤波的基本概念 1.双边滤波是一种非线性滤波 2.双边滤波的作用是保边降噪平滑滤波器 3.卷积核大小：33、55、77这个是比较常用的卷积核。二、双边滤波的关键参数 1.空间方差 用用控制空间位置差异的平滑程度。 空间方差越大，空间高斯的影响范围越…...
c++ 端口扫描程序实现案例
第一、原理端口扫描的原理很简单，就是建立socket通信，切换不通端口，通过connect函数，如果成功则代表端口开发者，否则端口关闭。所有需要多socket程序熟悉，本内容是在window环境下的第二、单线程实现方式123…...