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

电子签名？玩具罢了！

news 2026/4/1 8:29:00

需要的前置知识：简单的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>

相关文章：

电子签名？玩具罢了！

需要的前置知识&#xff1a;简单的canvas绘制线路过程 let canvas document.getElementById(id); //id为canvas标签元素的id&#xff0c;或通过其它方法获取标签 let ctx canvas.getContext(2d); //规定为2d绘制图片&#xff0c;即确定为2d画笔 ctx.strokeStyle "whit…...

编程日记 2023/5/11 8:19:46

【Spring Boot读取配置文件的方式】

Spring Boot 支持多种读取配置文件的方式&#xff0c;常用的方式有以下三种&#xff1a; application.properties&#xff1a; Spring Boot 默认会读取该文件作为应用的配置文件。可以在 src/main/resources 目录下创建该文件&#xff0c;并在其中配置应用的属性。 applicat…...

编程日记 2023/5/11 8:19:27

java学习路线规划

java学习路线规划 一、写在前面 兄弟&#xff0c;我整理了一下关于自己之前学习java的一些方向&#xff0c;给你归纳在这里&#xff0c;有空就来看看&#xff0c;希望对你有帮助。 二、java基础篇 1、认识java ​ 了解java历史&#xff0c;大概看看发展史&#xff0c;安装…...

编程日记 2023/5/11 8:19:15

格密码学习笔记（二）：连续极小、覆盖半径和平滑参数

文章目录最短距离和连续极小值距离函数和覆盖半径格的平滑参数致谢最短距离和连续极小值 除了行列式&#xff0c;格的另一个基本量是格上最短非零向量的长度&#xff0c;即格中最短距离&#xff0c;其定义为 λ1min⁡x,y∈L,x≠y∥x−y∥min⁡z∈L,z≠0∥z∥.\begin{aligned} …...

编程日记 2023/5/11 8:19:00

ios 通过搜索设备MAC地址绑定

最近做了一个物联网项目,涉及到了设备绑定配网这块,需要了解一下iOS BLE与设备绑定的相关知识点,第一次接触蓝牙相关的项目,所以开始熟悉蓝牙的相关信息。没有去深入研究BabyTooth库&#xff0c;只是感觉CoreBluetooth已经让我更好的理解整个流程这个物联网项目的设备绑定流程是…...

编程日记 2023/5/11 17:58:41

Python实现人脸识别，进行视频跟踪打码，羞羞的画面统统打上马赛克

哈喽兄弟们&#xff0c;我是轻松~ 今天我们来实现用Python自动对视频打马赛克前言准备工作代码实战效果展示最后前言 事情是这样的&#xff0c;昨天去表弟家&#xff0c;用了下他的电脑&#xff0c;不小心点到了他硬盘里隐藏的秘密&#xff0c;本来我只需要用几分钟电脑的&…...

编程日记 2023/5/11 17:58:36

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…...

编程日记 2023/5/11 17:58:33

Hexo+live2d | 如何把live2d老婆放进自己的博客

参考&#xff1a;Hexo添加Live2D看板娘最新教程live2d-widgetlive2d-widget-models网页/博客Hexo添加live2d游戏角色看板娘,简易添加&#xff0c;碧蓝航线等live2d新型游戏角色模型&#xff08;moc3&#xff09;live2d-moc3jsdelivr方法1可以直接去看参考文章的第一部分的第一篇…...

编程日记 2023/5/11 17:58:28

【微信小程序】-- 页面导航 -- 导航传参（二十四）

&#x1f48c; 所属专栏&#xff1a;【微信小程序开发教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &…...

编程日记 2023/5/11 17:58:25

Pytorch学习笔记#2: 搭建神经网络训练MNIST手写数字数据集

学习自https://pytorch.org/tutorials/beginner/basics/quickstart_tutorial.html 导入并预处理数据集 pytorch中数据导入和预处理主要用torch.utils.data.DataLoader 和 torch.utils.data.Dataset Dataset 存储样本及其相应的标签&#xff0c;DataLoader在数据上生成一个可迭…...

编程日记 2023/5/11 17:58:21

C语言 猜名次、猜凶手、杨辉三角题目详解

猜名次题目&#xff1a;5位运动员参加了10米台跳水比赛&#xff0c;有人让他们预测比赛结果&#xff1a;A选手说&#xff1a;B第二&#xff0c;我第三&#xff1b;B选手说&#xff1a;我第二&#xff0c;E第四&#xff1b;C选手说&#xff1a;我第一&#xff0c;D第二&#xff…...

编程日记 2023/5/11 17:58:18

蚁群算法负荷预测

%% 清空环境变量 clc clear close all format compact %% 网络结构建立 %% 清空环境变量 clc clear close all format compact %% 网络结构建立 %读取数据 dataxlsread(天气_电量_数据.xlsx,C12:J70);%前7列为每个时刻的发电量 最后列为天气 for i1:58 input(i,:)[data…...

编程日记 2023/5/11 17:58:09

ubuntu添加系统服务实现开机root权限运行

需求 开机自动运行程序(或脚本)&#xff0c;需要以root权限运行但不输入密码&#xff0c;也不能将密码写入文件。 环境 Ubuntu 20.04 解决方案 添加系统服务&#xff0c;然后通过systemctl控制。 操作步骤 假设目标程序为/home/xxx/test 1、创建service配置文件 [Unit…...

编程日记 2023/5/11 17:58:05

【阅读笔记】你不知道的Javascript--类与类型委托3

目录类一些常见原理混入行为委托委托理论类与对象更妙的设计与语法类型冷门关键词typeof 防范机制值原生函数访问内部属性类 一些常见原理 在继承或者实例化时&#xff0c;JavaScript 的对象机制并不会自动执行复制行为&#xff1b; 多态&#xff1a;JS 中的多态&#xff0c…...

编程日记 2023/5/10 19:48:49

文件服务设计

一、需求背景 文件的上传、下载功能是软件系统常见的功能&#xff0c;包括上传文件、下载文件、查看文件等。例如&#xff1a;电商系统中需要上传商品的图片、广告视频&#xff0c;办公系统中上传附件&#xff0c;社交类系统中上传用户头像等等。文件上传下载大致流程为&#…...

编程日记 2023/5/11 17:58:02

【批处理脚本】-1.22-字符串界定符号 ““

"><--点击返回「批处理BAT从入门到精通」总目录--> 共3页精讲（列举了所有字符串界定符号 ""的用法，图文并茂，通俗易懂） 在从事“嵌入式软件开发”和“Autosar工具开发软件”过程中，经常会在其集成开发环境IDE（CodeWarrior，S32K DS，Davinci，…...

编程日记 2023/5/11 17:57:57

【Flutter·学习实践·UI篇】基础且重要的UI知识

前言 参考学习官网&#xff1a;《Flutter实战第二版》 学习前先记住&#xff1a;Flutter 中万物皆为Widget&#xff0c;心中默念3次以上铭记于心。 这一点和开发语言Dart的变量一切皆是对象的概念&#xff0c;相互对应。 Widget 在前面的介绍中&#xff0c;我们知道在Flutt…...

编程日记 2023/5/11 17:57:54

【OpenCV】车牌自动识别算法的设计与实现

写目录一. &#x1f981; 设计任务说明1.1 主要设计内容1.1.1 设计并实现车牌自动识别算法&#xff0c;基本功能要求1.1.2 参考资料1.1.3 参考界面布局1.2 开发该系统软件环境及使用的技术说明1.3 开发计划二. &#x1f981; 系统设计2.1 功能分析2.1.1 车辆图像获取2.1.2 车牌…...

编程日记 2023/5/11 17:51:14

SpringBoot发送邮件

目录1. 获取授权码2. jar包引入3. 配置application4. 代码实现1. 获取授权码 以126邮箱为例&#xff0c;点开设置&#xff0c;选择POP3/SMTP/IMAP 开启POP3/SMTP服务&#xff0c;新增授权密码 扫码二维码&#xff0c;发送要求的短信内容到指定的号码即可&#xff0c;然后会返回…...

编程日记 2023/5/11 17:51:10

BigInteger类和BigDecimal类的简单介绍

文章目录&#x1f4d6;前言&#xff1a;&#x1f380;BigInteger类和BigDecimal类的由来&#x1f380;BigDecimal类的优点&#x1f380;BigDecimal类容易引发的错误&#x1f3c5;处理方法&#x1f4d6;前言&#xff1a; 本篇博客主要介绍BigInteger类和BigDecimal类的用途及常…...

编程日记 2023/5/11 17:51:06

5块钱的国产RISC-V芯片CH32V103能干啥？我用它复刻了一个STM32F103的小项目

5元国产RISC-V芯片实战&#xff1a;用CH32V103复刻STM32经典项目 在电子DIY领域&#xff0c;成本始终是创客们无法回避的现实问题。当我在某电商平台发现CH32V103这颗标价仅5元的RISC-V芯片时&#xff0c;第一反应是怀疑它的实用性——毕竟同级别的STM32F103C8T6价格通常在15-2…...

编程新知 2026/4/1 8:00:03

一文读懂：控制界的万能公式——PID算法到底是什么？

一文读懂：控制界的万能公式——PID算法到底是什么？ 对于每一位踏入工科大门的学生或是初入职场的工程师来说，在自动控制、机器人、电子工程等领域，有一个名字几乎如影随形——PID算法。从天上飞的四轴无人机，到地上跑的平衡小车；从化工厂里庞大的反应釜，到你家中安静运转…...

编程新知 2026/4/1 7:16:52

seo页面优化公司如何进行网站内容优化

SEO页面优化公司如何进行网站内容优化 在当今数字化时代&#xff0c;网站内容优化已经成为了每个企业在SEO&#xff08;搜索引擎优化&#xff09;中的关键步骤。SEO页面优化公司通过一系列策略和技术&#xff0c;帮助企业提高网站在搜索引擎中的排名&#xff0c;从而吸引更多的…...

编程新知 2026/4/1 7:00:22

8种Prompt优化技巧：解决大模型输出不稳定痛点

8种Prompt优化技巧&#xff1a;解决大模型输出不稳定痛点 在大模型应用落地过程中&#xff0c;开发者常遇到输出结果不可控的问题&#xff1a;同样的需求多次调用返回内容差异巨大、回答偏离核心要求、格式混乱无法直接解析&#xff0c;这些问题严重影响业务流程的稳定性和用户…...

编程新知 2026/4/1 6:50:06

TDengine IDMP 工业数据建模 —— 数据标准化

3.4 数据标准化 工业环境通常从多个数据源采集数据&#xff0c;这些数据往往命名不一致、物理单位各异、数据结构不同。如果没有标准化&#xff0c;跨资产分析、AI 生成洞察和数据汇聚将变得不可靠甚至无法实现。TDengine IDMP 提供了多种机制&#xff0c;对整个资产模型中的数…...

编程新知 2026/4/1 6:21:33

忍者像素绘卷：天界画坊Python入门实战，3步搭建AI绘画环境

忍者像素绘卷&#xff1a;天界画坊Python入门实战&#xff0c;3步搭建AI绘画环境 1. 前言&#xff1a;当Python遇见像素艺术 还记得小时候玩过的8-bit游戏吗&#xff1f;那些由一个个小方块组成的像素世界&#xff0c;如今正以全新的方式回归。天界画坊是一个开源的AI绘画工具…...

编程新知 2026/4/1 6:01:20

Qt跨平台即时通讯实战：从界面设计到TCP通信的完整实现

1. Qt跨平台即时通讯开发概述 用Qt框架开发即时通讯软件最大的优势就是"一次编写&#xff0c;到处运行"。我去年接手过一个项目&#xff0c;需要在Windows和Linux双平台上部署聊天工具&#xff0c;当时尝试过多种技术方案&#xff0c;最终Qt以绝对优势胜出。想象一下…...

编程新知 2026/4/1 5:33:01

Asian Beauty Z-Image Turbo基础教程：如何修改默认提示词实现‘旗袍少女’‘水墨仕女’风格

Asian Beauty Z-Image Turbo基础教程&#xff1a;如何修改默认提示词实现‘旗袍少女’‘水墨仕女’风格 想用AI画出充满东方韵味的“旗袍少女”或“水墨仕女”&#xff0c;但试了很多模型&#xff0c;出来的效果总是不对味&#xff1f;要么人物五官太西化&#xff0c;要么画面…...

编程新知 2026/4/1 5:08:52

CLIP-GmP-ViT-L-14图文匹配工具入门必看：上传图片+批量文本匹配全流程

CLIP-GmP-ViT-L-14图文匹配工具入门必看&#xff1a;上传图片批量文本匹配全流程 你是不是经常好奇&#xff0c;AI到底能不能看懂图片&#xff1f;比如&#xff0c;你给它一张小狗的照片&#xff0c;它能准确说出这是“一只狗”而不是“一只猫”或“一辆车”吗&#xff1f;今天…...

编程新知 2026/4/1 4:13:49

基于大数据 Spark+Hadoop+Hive的中国不同城市奶茶品牌的影响力分析

前言现如今在中国市场中&#xff0c;奶茶行业以其别具一格的魅力和庞大的年轻消费群体&#xff0c;具备一些研究价值。伴随着消费者需求的日益多样化和市场竞争的逐步激烈&#xff0c;奶茶品牌在中国不同城市的影响力呈现出显著的差异。本研究基于这一背景&#xff0c;以中国不…...

编程新知 2026/4/1 3:29:10