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

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

news 2025/11/2 15:37:27

文章目录

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

一、效果:

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

二、实现:

<!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

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/9/7 11:32:34

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/10/26 22:44:03

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/10/28 19:03:33

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/10/20 1:24:05

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2025/10/25 16:24:22

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2025/10/27 2:11:27

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2025/10/29 1:49:43