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

【JavaScript】前端实现电子签名：

news 2025/7/8 22:53:09

文章目录

        • 一、效果:
        • 二、实现:
        • 三、扩展

一、效果:

在这里插入图片描述
在这里插入图片描述

二、实现:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}</style>
</head>
<body><canvas></canvas><div><button onclick="cancel()">取消</button><button onclick="save()">保存</button></div>
</body>
<script>// 配置内容const config = {width: 400, // 宽度height: 200, // 高度lineWidth: 5, // 线宽strokeStyle: 'red', // 线条颜色lineCap: 'round', // 设置线条两端圆角lineJoin: 'round', // 线条交汇处圆角}// 获取canvas 实例const canvas = document.querySelector('canvas')// 设置宽高canvas.width = config.widthcanvas.height = config.height// 设置一个边框canvas.style.border = '1px solid #000'// 创建上下文const ctx = canvas.getContext('2d')// 设置填充背景色ctx.fillStyle = 'transparent'// 绘制填充矩形ctx.fillRect(0, // x 轴起始绘制位置0, // y 轴起始绘制位置config.width, // 宽度config.height // 高度);// 保存上次绘制的 坐标及偏移量const client = {offsetX: 0, // 偏移量offsetY: 0,endX: 0, // 坐标endY: 0}// 判断是否为移动端const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))// 初始化const init = event => {// 获取偏移量及坐标const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event // 修改上次的偏移量及坐标client.offsetX = offsetXclient.offsetY = offsetYclient.endX = pageXclient.endY = pageY// 清除以上一次 beginPath 之后的所有路径，进行绘制ctx.beginPath()// 根据配置文件设置相应配置ctx.lineWidth = config.lineWidthctx.strokeStyle = config.strokeStylectx.lineCap = config.lineCapctx.lineJoin = config.lineJoin// 设置画线起始点位ctx.moveTo(client.endX, client.endY)// 监听 鼠标移动或手势移动window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)}// 绘制const draw = event => {// 获取当前坐标点位const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event// 修改最后一次绘制的坐标点client.endX = pageXclient.endY = pageY// 根据坐标点位移动添加线条ctx.lineTo(pageX , pageY )// 绘制ctx.stroke()}// 结束绘制const cloaseDraw = () => {// 结束绘制ctx.closePath()// 移除鼠标移动或手势移动监听器window.removeEventListener("mousemove", draw)}// 创建鼠标/手势按下监听器window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)// 创建鼠标/手势 弹起/离开 监听器window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw)// 取消-清空画布const cancel = () => {// 清空当前画布上的所有绘制内容ctx.clearRect(0, 0, config.width, config.height)}// 保存-将画布内容保存为图片const save = () => {// 将canvas上的内容转成blob流canvas.toBlob(blob => {console.log(blob,URL.createObjectURL(blob))// 获取当前时间并转成字符串，用来当做文件名const date = Date.now().toString()// 创建一个 a 标签const a = document.createElement('a')// 设置 a 标签的下载文件名a.download = `${date}.png`// 设置 a 标签的跳转路径为 文件流地址a.href = URL.createObjectURL(blob)// 手动触发 a 标签的点击事件a.click()// 移除 a 标签a.remove()})}
</script>
</html>

三、扩展

【各内核和浏览器支持情况】
Mozilla 程序从 Gecko 1.8 (Firefox 1.5 (en-US)) 开始支持canvas。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 从 IE9 开始支持canvas ，更旧版本的 IE 中，页面可以通过引入 Google 的 Explorer Canvas项目中的脚本来获得canvas支持。Google Chrome 和 Opera 9+ 也支持 canvas。

【小程序中提示】
在小程序中我们如果需呀实现的话，也是同样的原理哦，只是我们需要将创建实例和上下文的Api进行修改，因为小程序中是没有dom，既然没有dom，哪来的操作dom这个操作呢。

如果是uni-app则需要使用uni.createCanvasContext进行上下文创建
【uni.createCanvasContext】 https://uniapp.dcloud.net.cn/api/canvas/createCanvasContext.html

如果是原生微信小程序则使用wx.createCanvasContext进行创建（2.9.0）之后的库不支持
【wx.createCanvasContext】 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html

【canvas】 https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

相关文章：

【JavaScript】前端实现电子签名：

文章目录一、效果:二、实现:三、扩展一、效果: 二、实现: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"vie…...

编程日记 2023/2/25 0:01:27

Windows 11 22H2 中文版、英文版 (x64、ARM64) 下载 (updated Feb 2023)

Windows 11, version 22H2&#xff0c;2023 年 2 月 更新 请访问原文链接&#xff1a;https://sysin.org/blog/windows-11/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;www.sysin.org 全新推出 Windows 11 全新 Windows 体验&#x…...

编程日记 2023/2/25 0:00:15

【java】Spring Cloud --Spring Cloud Alibaba 教程

文章目录Spring Cloud Alibaba是什么Spring Cloud AlibabaSpring Cloud Alibaba 组件Spring Cloud Alibaba 的应用场景Spring Cloud 两代实现组件对比Spring Cloud Alibaba 版本依赖Spring Cloud Alibaba 组件版本关系Spring Cloud Alibaba NacosNacos 的特性服务发现服务健康监…...

编程日记 2023/2/24 23:58:54

通过操作Cortex-A7核，串口输入相应的命令，控制LED灯进行工作增加编程要求

2.编程要求&#xff1a; 1&#xff09;结构体封装 typedef struct{ char* cmd_arr; //命令行字符串 gpio_t* gpiox;//GPIO组号 unsigned int pin; //引脚编号 status_t status; //LED灯状态 void(*gpio_write_pin)(gpio_t* gpiox,unsigned int pin,status_t status); }cmd_t; 2…...

编程日记 2023/2/24 23:57:39

银行家算法

银行家算法 银行家算法是一种用来避免操作系统死锁出现的有效算法&#xff0c;所以在引入银行家算法的解释之前&#xff0c;有必要简单介绍一下死锁的概念。 一、死锁 死锁&#xff1a;是指两个或两个以上的进程在执行过程中&#xff0c;由于竞争资源或者由于彼此通信而造成…...

编程日记 2023/2/24 23:56:29

181、【动态规划】leetcode ——72. 编辑距离（C++版本）

题目描述 原题链接&#xff1a;72. 编辑距离 解题思路 动态规划五步曲&#xff1a; &#xff08;1&#xff09;dp[i][j]含义&#xff1a; 以word1[i - 1]和word2[j - 1]结尾子串&#xff0c;经过最少次增删改后&#xff0c;可让word1变为word2的步数。dp中的i对应word1中的i…...

编程日记 2023/2/24 23:55:18

mysql 中关于慢查询日志

慢查询日志 慢查询日志主要用来记录执行时间超过设置的某个时长的SQL语句&#xff0c;能够帮助数据库维护人员找出执行时间比较长、执行效率比较低的SQL语句&#xff0c;并对这些SQL语句进行针对性优化。 开启慢查询 可以在 my.cnf 文件或者 my.ini 文件中配置开启慢查询日志…...

编程日记 2023/2/24 23:53:58

程序员必备的软技能-金字塔原理拆解（上）

原书 290千字&#xff0c;本文预计 14千字&#xff0c;拆解比 20&#xff1a;1&#xff0c;预计阅读时长 15分钟序言日常工作中&#xff0c;常常因为思维、表达方式不对产生不想要的结果&#xff1a;写了一个小时的周报&#xff0c;领导却不满意&#xff1f;跟团队讲了半天自己…...

编程日记 2023/2/24 23:52:48

关于我利用python开发的PC端标注软件及目标检测软件

如何利用python快速开发PC端目标检测及数据标注软件概述开发软件背景开发第一步&#xff1a;功能需求分析开发第二步&#xff1a; 前端分区设计开发第三步&#xff1a;功能开发开发第四步&#xff1a;程序功能的打包与检查开发第五步&#xff1a;程序的反馈与改善一个例子的展示…...

编程日记 2023/2/24 23:51:30

Git导出增量包的操作步骤

前言在项目开发部署中&#xff0c;通常是将一个Git项目全量打包发布&#xff0c;但有的场景只需要导出有变更的那部分文件&#xff0c;增量发布&#xff0c;此时就需要使用Git导出增量包了。一、查看提交记录拿到提交ID码①例如使用的gitlab使用方法参考下图(一目了然) 【推荐】…...

编程日记 2023/2/24 23:50:06

JavaWeb--JavaScript

JavaScript1 JavaScript简介2 JavaScript引入方式2.1 内部脚本2.2 外部脚本3 JavaScript基础语法3.1 书写语法3.2 输出语句3.3 变量3.4 数据类型3.5 运算符3.5.1 \\ 和 区别3.5.2 类型转换3.6 流程控制语句3.6.1 if 语句3.6.2 switch 语句3.6.3 for 循环语句3.6.4 while 循环语…...

编程日记 2023/2/24 23:48:55

mars3d加载建筑物白膜及简单建筑物样式

首先需要拥有shp格式的数据。可以通过水经微图下载&#xff0c;注意此软件是付费的将shp格式的数据处理为切片数据&#xff0c;可以使用cesiumlab处理完成得到json数据就可以在mars3d中加载了 function init() { // 判断webgl支持 if (!mars3d.Util.webglreport()) { …...

编程日记 2023/2/24 23:47:35

数据结构之顺序表

本章重点&#xff1a; 1.线性表 2.顺序表 3.链表 4.顺序表和链表的区别和联系 目录 1.线性表 2.顺序表 2.1概念及结构 2.2接口实现 2.2.1 SeqList.h 2.2.2 SeqList.c 2.3数组相关面试题 2.3.1移除元素 2.3.2删除有序数组中的重复项 ​编辑 2.3.3合并两个有序数组…...

编程日记 2023/2/24 23:46:27

【数据挖掘实战】——家用电器用户行为分析及事件识别

项目地址&#xff1a;Datamining_project: 数据挖掘实战项目代码 目录 一、背景和挖掘目标 1、问题背景 2、原始数据 3、挖掘目标 二、分析方法与过程 1、初步分析 2、总体流程 第一步&#xff1a;数据抽取 第二步&#xff1a;探索分析 第三步&#xff1a;数据的预处…...

编程日记 2023/2/24 23:45:14

肠道核心菌属——双歧杆菌属，了解并拥有它

双歧杆菌 双歧杆菌属&#xff08;Bifidobacterium&#xff09;是放线菌门严格厌氧的革兰氏阳性多形性杆状细菌。末端常常分叉&#xff0c;故名双歧杆菌。是人和动物肠道的重要核心菌群和有益生理菌群&#xff0c;也是母乳喂养婴儿中发现的第二大菌。 肥胖、糖尿病和过敏等各种疾…...

编程日记 2023/2/24 23:44:02

Python 之 Pandas 生成时间戳范围、Pandas 的时期函数 Period() 和时间序列 - 重采样 resample

文章目录一、生成时间戳范围1. 指定值2. 指定开始日期并设置期间数3. 频率 freq4. closed二、Pandas 的时期函数 Period()三、时间序列 - 重采样 resample在开始之前&#xff0c;我们先导入 numpy 和 pandas 库&#xff0c;同时导入 python 内置的模块。 import pandas as pd​…...

编程日记 2023/2/24 23:42:52

利用Python和Sprak求曲线与X轴上方的面积

有n组标本(1, 2, 3, 4), 每组由m个( , , ...)元素( , )组成(m值不定), . 各组样本的分布 曲线如下图所示. 通过程序近似实现各曲线与oc, cd直线围成的⾯积. 思路 可以将图像分成若干个梯形&#xff0c;每个梯形的底边长为(Xn1 - Xn-1)&#xff0c;面积为矩形的一半&#xff0c…...

编程日记 2023/2/24 23:41:40

利用机器学习(mediapipe)，进行人手的21个3D手关节坐标检测

感知手的形状和动作的能力可能是在各种技术领域和平台上改善用户体验的重要组成部分。例如，它可以构成手语理解和手势控制的基础，并且还可以在增强现实中将数字内容和信息覆盖在物理世界之上。虽然自然而然地出现在人们手中，但是强大的实时手感知力无疑是一项具有挑战性的计…...

编程日记 2023/2/24 23:40:20

【添砖java】谁说编程第一步是hello world

编程第一步明明是下载编译器和配置环境&#xff08;小声逼逼&#xff09;。 Windows下的java环境安装&#xff1a; java的安装包分为两类&#xff0c;一类是JRE&#xff08;Java Runtime Environmental&#xff09;&#xff0c;是一个独立的java运行环境&#xff1b;一类是JDK…...

编程日记 2023/2/24 23:38:01

el-table大数据量渲染卡顿问题

1、场景描述 在项目开发中&#xff0c;遇到在表格中一次性加载完的需求&#xff0c;且加载数量不少&#xff0c;有几百几千条&#xff0c;并且每条都可能有自己的下拉框&#xff0c;输入框来做编辑功能&#xff0c;此时普通的el-table肯定会导致浏览器卡死&#xff0c;那么怎么…...

编程日记 2023/2/24 23:36:49

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/7/6 21:38:30

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/7/8 0:34:21

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/7/8 6:29:53

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2025/7/6 18:33:10

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/6/23 15:05:31

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2025/7/8 16:27:20

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/6/25 4:08:42

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/7/6 14:54:44

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2025/7/6 10:44:30

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2025/7/6 2:33:06