JavaScript实现手写签名，可触屏手写，支持移动端与PC端双端保存

news2024/11/25 3:47:28

目录

1.HTML模板

2.获取DOM元素和定义变量

3.创建两个canvas元素，并设置它们的宽度和高度

4.绑定触摸事件：touchstart, touchmove, touchend和click

5.实现触摸事件回调函数：startDrawing, draw和stopDrawing

6.实现绘制线段的函数：drawLine

7.实现清除签名的函数：clearSignature

8.实现保存签名的函数：saveSignature

9.将canvas元素插入DOM树中

10.完整代码 

11.效果图 

1.HTML模板
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
  <style>
    /* 样式表 */
  </style>
</head>
<body>
  <!-- 签名区域 -->
  <div id="signatureArea"></div>

  <!-- 操作按钮：清除和保存 -->
  <button id="clearButton">清除</button>
  <button id="saveButton">保存签名</button>

  <!-- JavaScript代码 -->
  <script type="text/javascript">
    // JavaScript代码
  </script>
</body>
</html>
2.获取DOM元素和定义变量
// 获取DOM元素
var signatureArea = document.getElementById('signatureArea');
var clearButton = document.getElementById('clearButton');
var saveButton = document.getElementById('saveButton');

// 定义变量
var isDrawing = false; // 是否正在绘制
var lastX, lastY; // 上一个触摸点的坐标
3.创建两个canvas元素，并设置它们的宽度和高度
// 创建两个canvas元素
var drawingCanvas = document.createElement('canvas'); // 用于绘制签名
var backgroundCanvas = document.createElement('canvas'); // 用于保存带有白色背景的签名图像
var drawingCtx = drawingCanvas.getContext('2d'); // 获取绘制画布的上下文对象
var backgroundCtx = backgroundCanvas.getContext('2d'); // 获取背景画布的上下文对象
drawingCanvas.width = signatureArea.offsetWidth;
drawingCanvas.height = signatureArea.offsetHeight;
backgroundCanvas.width = drawingCanvas.width;
backgroundCanvas.height = drawingCanvas.height;
4.绑定触摸事件：touchstart, touchmove, touchend和click
// 绑定触摸事件
signatureArea.addEventListener('touchstart', startDrawing);
signatureArea.addEventListener('touchmove', draw);
signatureArea.addEventListener('touchend', stopDrawing);
clearButton.addEventListener('click', clearSignature);
saveButton.addEventListener('click', saveSignature);
5.实现触摸事件回调函数：startDrawing, draw和stopDrawing
// 开始绘制
function startDrawing(e) {
  e.preventDefault(); // 阻止默认事件
  var touch = e.touches[0]; // 获取触摸点坐标
  var rect = signatureArea.getBoundingClientRect(); // 获取签名区域的位置和大小
  lastX = touch.clientX - rect.left;
  lastY = touch.clientY - rect.top;
  isDrawing = true;
}

// 绘制中
function draw(e) {
  if (!isDrawing) return;
  var touch = e.touches[0];
  var rect = signatureArea.getBoundingClientRect();
  var x = touch.clientX - rect.left;
  var y = touch.clientY - rect.top;
  drawLine(lastX, lastY, x, y);
  lastX = x;
  lastY = y;
}

// 停止绘制
function stopDrawing() {
  isDrawing = false;
}
6.实现绘制线段的函数：drawLine
// 绘制实线
function drawLine(x1, y1, x2, y2) {
  drawingCtx.beginPath(); // 开始一条新的路径
  drawingCtx.moveTo(x1, y1); // 将画笔移动到起点
  drawingCtx.lineTo(x2, y2); // 绘制一条直线到终点
  drawingCtx.lineWidth = 1; // 设置线条的宽度为1像素
  drawingCtx.strokeStyle = '#000'; // 设置线条颜色为黑色
  drawingCtx.stroke(); // 绘制线条
}
7.实现清除签名的函数：clearSignature
// 清除签名
function clearSignature() {
  drawingCtx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height); // 清除绘制画布的内容
  backgroundCtx.clearRect(0, 0, backgroundCanvas.width, backgroundCanvas.height); // 清除背景画布的内容
}
8.实现保存签名的函数：saveSignature
// 保存签名
function saveSignature() {
  // 绘制白色背景
  backgroundCtx.fillStyle = 'white';
  backgroundCtx.fillRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);

  // 复制绘制的签名到带有白色背景的画布
  backgroundCtx.drawImage(drawingCanvas, 0, 0);

  // 将带有白色背景的画布内容转为PNG格式的DataURL
  var dataURL = backgroundCanvas.toDataURL("image/png");

  // 创建一个链接元素并设置下载属性
  var link = document.createElement('a');
  link.href = dataURL;
  link.download = '签名.png'; // 设置下载文件的名称

  // 检查是否支持保存到相册
  if ("download" in link) {
    link.style.display = "none";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } else {
    // 如果不支持保存到相册，你可以提供其他方式或提示用户手动保存
    alert("无法直接保存到相册，请手动保存签名图片。");
  }
}
9.将canvas元素插入DOM树中
// 将canvas元素插入DOM树中
signatureArea.appendChild(drawingCanvas);
10.完整代码 
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    #signatureArea {
      width: 100%;
      height: 300px;
      border: 1px solid #ccc;
      margin-bottom: 20px;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 4px;
    }

    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <div id="signatureArea"></div>
  <button id="clearButton">清除</button>
  <button id="saveButton">保存签名</button>

  <script type="text/javascript">
// 获取DOM元素
var signatureArea = document.getElementById('signatureArea');
var clearButton = document.getElementById('clearButton');
var saveButton = document.getElementById('saveButton');

// 定义变量
var isDrawing = false; // 是否正在绘制
var lastX, lastY; // 上一个触摸点的坐标

// 创建两个canvas元素
var drawingCanvas = document.createElement('canvas'); // 用于绘制签名
var backgroundCanvas = document.createElement('canvas'); // 用于保存带有白色背景的签名图像
var drawingCtx = drawingCanvas.getContext('2d');
var backgroundCtx = backgroundCanvas.getContext('2d');
drawingCanvas.width = signatureArea.offsetWidth;
drawingCanvas.height = signatureArea.offsetHeight;
backgroundCanvas.width = drawingCanvas.width;
backgroundCanvas.height = drawingCanvas.height;

// 绑定触摸事件
signatureArea.addEventListener('touchstart', startDrawing);
signatureArea.addEventListener('touchmove', draw);
signatureArea.addEventListener('touchend', stopDrawing);
clearButton.addEventListener('click', clearSignature);
saveButton.addEventListener('click', saveSignature);

// 开始绘制
function startDrawing(e) {
  e.preventDefault();
  var touch = e.touches[0];
  var rect = signatureArea.getBoundingClientRect();
  lastX = touch.clientX - rect.left;
  lastY = touch.clientY - rect.top;
  isDrawing = true;
}

// 绘制中
function draw(e) {
  if (!isDrawing) return;
  var touch = e.touches[0];
  var rect = signatureArea.getBoundingClientRect();
  var x = touch.clientX - rect.left;
  var y = touch.clientY - rect.top;
  drawLine(lastX, lastY, x, y);
  lastX = x;
  lastY = y;
}

// 停止绘制
function stopDrawing() {
  isDrawing = false;
}

// 绘制实线
function drawLine(x1, y1, x2, y2) {
  drawingCtx.beginPath();
  drawingCtx.moveTo(x1, y1);
  drawingCtx.lineTo(x2, y2);
  drawingCtx.lineWidth = 1;
  drawingCtx.strokeStyle = '#000';
  drawingCtx.stroke();
}

// 清除签名
function clearSignature() {
  drawingCtx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
  backgroundCtx.clearRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);
}

// 保存签名
function saveSignature() {
  // 绘制白色背景
  backgroundCtx.fillStyle = 'white';
  backgroundCtx.fillRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);

  // 复制绘制的签名到带有白色背景的画布
  backgroundCtx.drawImage(drawingCanvas, 0, 0);

  // 将带有白色背景的画布内容转为PNG格式的DataURL
  var dataURL = backgroundCanvas.toDataURL("image/png");

  // 创建一个链接元素并设置下载属性
  var link = document.createElement('a');
  link.href = dataURL;
  link.download = '签名.png'; // 设置下载文件的名称

  // 检查是否支持保存到相册
  if ("download" in link) {
    link.style.display = "none";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } else {
    // 如果不支持保存到相册，你可以提供其他方式或提示用户手动保存
    alert("无法直接保存到相册，请手动保存签名图片。");
  }
}

// 将canvas元素插入DOM树中
signatureArea.appendChild(drawingCanvas);

  </script>
</body>
</html>
11.效果图 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1292475.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C# WPF上位机开发（带配置文件的倒计时软件）

C# WPF上位机开发（带配置文件的倒计时软件）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们写了倒计时软件&#xff0c;但是不知道大家有没有发现&#xff0c;这个软件起始有一个缺点&#xff0c;那就是倒计时的起始时间都是硬编码…
阅读更多...
stl库之map与例题

stl库之map与例题

map是一种关联式容器&#xff0c;它允许将键&#xff08;key&#xff09;映射到值&#xff08;value&#xff09;&#xff0c;所以我们习惯称map为映射 每个元素都是一个键值对&#xff0c;其中键是唯一的 创建map map<key类型, value类型> 变量名; 创建一个键为int&…
阅读更多...
11.7QT界面制作

11.7QT界面制作

#include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent) {this->resize(881,550);this->setStyleSheet("backgroud-color:rgb(33,35,40)");this->setWindowFlag(Qt::FramelessWindowHint);//标签类QLabel *l1 new QLabel(this);/…
阅读更多...
深入理解Flexbox：构建灵活的布局系统

深入理解Flexbox：构建灵活的布局系统

由于篇幅限制&#xff0c;我将提供一个详细的文章大纲和部分内容。您可以根据这个大纲扩展文章内容&#xff0c;以满足3000字的要求。 深入理解Flexbox&#xff1a;构建灵活的布局系统 引言 在现代web设计中&#xff0c;创建灵活且响应式的布局是非常重要的。Flexbox&#xf…
阅读更多...
通达OA inc/package/down.php接口存在未授权访问漏洞

通达OA inc/package/down.php接口存在未授权访问漏洞

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 一. 产品简介 通达OA&#xff08;Office Anywhere网络智能办公系统&am…
阅读更多...
List的元素覆盖问题

List的元素覆盖问题

问题场景 在备课底层JDBC链接链接数据库时&#xff0c;将读取的数据封装到对象中并添加到list集合中出现了问题。 错误逻辑 代码编写的考量为减少对象占用内存。想通过一个对象完成数据的传递和保存。 核心问题 List集合存储的是每一个对象的引用地址&#xff0c;如果引用的…
阅读更多...
perl脚本获取Windows系统常用路径信息

perl脚本获取Windows系统常用路径信息

windows系统常用的路径,比如临时目录、资源文件夹、字体保存目录、应用程序数据存放目录等等。在日常操作的时候寻找略有不便。这里用perl写一个脚本&#xff0c;并把这些目录信息格式化为json&#xff0c;方便查找。如下是perl代码&#xff1a; #! /usr/bin/perl use v5.14; …
阅读更多...
机器学习---环境准备

机器学习---环境准备

一、pySpark环境准备 1、window配置python环境变量 window安装python&#xff0c;配置python环境变量。安装python后,在环境变量path中加入安装的路径&#xff0c;cmd中输入python&#xff0c;检验python是否安装成功。 注意&#xff1a;如果使用的是anaconda安装的python环境…
阅读更多...
Elaticsearch 学习笔记

Elaticsearch 学习笔记

文章目录 Elaticsearch 学习笔记一、什么是 Elaticsearch &#xff1f;二、Elaticsearch 安装1 es 安装2 问题解决3 数据格式 三、索引操作1 PUT 请求&#xff1a;在postman中&#xff0c;向 ES 服务器发 PUT 请求&#xff08;PUT请求相当于创建的意思&#xff09;2 GET 请求&a…
阅读更多...
Unity3D实现鼠标悬浮UI或物体上显示文字信息

Unity3D实现鼠标悬浮UI或物体上显示文字信息

系列文章目录 Unity工具 文章目录 系列文章目录前言最终效果一、UI事件显示文字1-1 ui事件需要引用命名空间using UnityEngine.EventSystems;1-2 IPointerEnterHandler 接口1-3 IPointerExitHandler 接口1-4 IPointerMoveHandler 接口 二、场景搭建2-1 实现如下 三、代码实现3…
阅读更多...
【数据库】树形数据组织架构下的封锁并发控制，B树索引并发访问控制，树协议原理及案例分析

【数据库】树形数据组织架构下的封锁并发控制，B树索引并发访问控制，树协议原理及案例分析

数据库并发访问树协议 ​专栏内容&#xff1a; 手写数据库toadb 本专栏主要介绍如何从零开发&#xff0c;开发的步骤&#xff0c;以及开发过程中的涉及的原理&#xff0c;遇到的问题等&#xff0c;让大家能跟上并且可以一起开发&#xff0c;让每个需要的人成为参与者。 本专栏会…
阅读更多...
数码产品稿件怎么写？纯干货！

数码产品稿件怎么写？纯干货！

在科技日新月异的今天&#xff0c;数码产品已经成为人们生活的重要组成部分。无论是手机、电脑、平板还是智能家居&#xff0c;这些产品的出现都在不断改变着我们的生活方式。因此&#xff0c;对于数码产品的评测和分析就显得尤为重要。本文伯乐网络传媒将为你揭秘如何撰写高质…
阅读更多...
ChatGPT可能即将发布新版本，带有debug功能：支持下载原始对话、可视化对话分支等

ChatGPT可能即将发布新版本，带有debug功能：支持下载原始对话、可视化对话分支等

本文原文来自DataLearnerAI官方网站&#xff1a;ChatGPT内置隐藏debug功能&#xff1a;支持下载原始对话、可视化对话分支等 | 数据学习者官方网站(Datalearner) AIPRM的工作人员最近发现ChatGPT的客户端隐藏内置了一个新的debug特性&#xff0c;可以提高ChatGPT对话的问题调试…
阅读更多...
【APP抓包】Charles+burp+夜神模拟器联动抓包（带导入系统级0证书）

【APP抓包】Charles+burp+夜神模拟器联动抓包（带导入系统级0证书）

【APP抓包】Charlesburp夜神模拟器联动抓包&#xff08;带导入系统级0证书&#xff09; 0x00、大傻春你要干什么&#xff1f;0x01、夜神模拟器安装0x02、安装Charles0、版本1、安装2、破解3、安装导入用户证书4、【非必要】安装系统证书 0x03、Charles配置代理1、Charles设置代…
阅读更多...
python-比较Excel两列数据，并分别显示差异

python-比较Excel两列数据，并分别显示差异

利用 openpyxl 模块&#xff0c;操作Excel&#xff0c;比较Excel两列数据&#xff0c;并分别显示差异 表格数据样例如下图 A&#xff0c;B两列是需要进行比较的数据&#xff08;数据源为某网站公开数据&#xff09;&#xff1b;C&#xff0c;D两列是比较结果的输出列 A&#…
阅读更多...
第二十一章网络通信总结博客

第二十一章网络通信总结博客

网络程序设计基础 局域网与互联网 为了实现两台计算机的通信&#xff0c;必须用一个网络线路连接两台计算机。如下图所示 网络协议 1.IP协议 IP是Internet Protocol的简称&#xff0c;是一种网络协议。Internet 网络采用的协议是TCP/IP协议&#xff0c;其全称是Transmissio…
阅读更多...
AttributeError: module ‘importlib_resources‘ has no attribute ‘path‘ 解决方案

AttributeError: module ‘importlib_resources‘ has no attribute ‘path‘ 解决方案

问题描述 with importlib_resources.path("xx", fname) as p: AttributeError: module importlib_resources has no attribute path 博主使用的是python3.9&#xff0c;看importlib_resources在importlib-resources PyPI中的介绍&#xff0c;开始猜测问题出在pyth…
阅读更多...
【重磅来袭！！！工程师必备初始化建工程软件】

【重磅来袭！！！工程师必备初始化建工程软件】

重磅来袭&#xff01;&#xff01;&#xff01;工程师必备初始化软件 每个工程建立前&#xff0c;你是否为了要建立各种文件夹而烦恼&#xff1f;你是否为了因为工程每次文件夹不统一找不到文件而烦扰&#xff1f;来咯&#xff0c;Project Initial V1_0软件只需输入工程名称&am…
阅读更多...
12-07 周四 Pytorch 使用Visdom 进行可视化

12-07 周四 Pytorch 使用Visdom 进行可视化

简介 在完成了龙良曲的Pytroch视频课程之后&#xff0c;楼主对于pytroch有了进一步的理解&#xff0c;比如&#xff0c;比之前更加深刻的了解了BP神经网络的反向传播算法&#xff0c;梯度、损失、优化器这些名词更加熟悉。这个博客简要介绍一下在使用Pytorch进行数据可视化的一…
阅读更多...
VBA技术资料MF93：将多个Excel表插入PowerPoint不同位置

VBA技术资料MF93：将多个Excel表插入PowerPoint不同位置

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。我的教程一共九套&#xff0c;分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的入门&#xff0c;到…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023