长春网站建设网站/外贸平台app
需要的前置知识：简单的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类的用途及常…...
mysql五种索引类型---实操版本
背景 最近学习了Mysql的索引，索引对于Mysql的高效运行是非常重要的，正确的使用索引可以大大的提高MySql的检索速度。通过索引可以大大的提升查询的速度。不过也会带来一些问题。比如会降低更新表的速度（因为不但要把保存数据还要保存一下索引…...
【微信小程序】-- 页面导航 -- 编程式导航（二十三）
💌 所属专栏：【微信小程序开发教程】 😀 作 者：我是夜阑的狗🐶 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！ &…...
路由追踪工具 traceroute 使用技巧
路由追踪工具 traceroute 使用技巧路由追踪工作原理路由追踪实例1. 如何运行 traceroute2. 禁用 IP 地址和主机名映射3. 配置回复等待时间4. 配置每一跳的查询次数5. 配置 TTL 值我想知道一个数据包从出发地到目的地所遵循的路由，即所有转发实体（中间的路…...
NGINX学习笔记 - 一篇了解NGINX的基本概念(一)
NGINX是什么？ NGINX是一款由俄罗斯人伊戈尔赛索耶夫使用C语言开发的、支持热部署的、轻量级的WEB服务器/反向代理服务器/电子邮件代理服务器，因为占用内存较少，启动极快，高并发能力强，所以在互联网项目中广泛应用。可…...
Spring-Cloud-Gateway的过滤器的执行顺序问题
过滤器的种类 Spring-Cloud-Gateway中提供了3种类型的过滤器，分别是：路由过滤器、Default过滤器和Global过滤器。 路由过滤器和Default过滤器 路由过滤器和Default过滤器本质上是同一种过滤器，只不过作用范围不一样，路由过滤器…...
Android性能优化的底层逻辑
前言性能优化仿佛成了每个程序员开发的必经之路，要想出人头地，与众不同，你还真需要下点功夫去研究Android的性能优化，比如说，从优化应用启动、UI加载、再到内存、CPU、GPU、IO、还有耗电等等，当你展开一个方…...
Gradle+SpringBoot多模块开发
关于使用Gradle结合SpringBoot进行多模块开发。 本来是打算使用buildSrc之类的，但是感觉好像好麻烦，使用这种方法就可以实现，没必要采用其他的。 我不怎么会表述，可能写的跟粑粑一样，哈哈哈哈 这是我的项目地址。 存在…...
Qt 之 emit、signals、slot的使用
本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（C语言基础，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QSS&am…...
每日学术速递3.6
Subjects: cs.CV 1.Multi-Source Soft Pseudo-Label Learning with Domain Similarity-based Weighting for Semantic Segmentation 标题：用于语义分割的基于域相似性加权的多源软伪标签学习 作者：Shigemichi Matsuzaki, Hiroaki Masuzawa, Jun Miura …...
C# 将对象转换成字节数组（二进制数据）
在将自定义对象或者数组等这样的数据存储到数据库时往往需要转换成二进制字节，尤其是在一些O/RM数据库框架中，下面是转换的函数，一个是将对象转换成二进制字节数组，另一个是将从数据库中读取的二进制流转换成程序中的对象。 这里…...