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

目录

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.mfbz.cn/a/226389.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C语言——输出菱形

C语言——输出菱形

法一&#xff1a; #include<stdio.h> #define N 7 //假设输出7层菱形 int main(){int i;//i控制第几行 int j;//j控制每一行空格的循环个数 int k;//k控制每一行*的循环次数 for(i1;i<4;i){//将图形分为两部分,前四行(第一部分) for(j1;j<4-i;j){//输出第i行的…
阅读更多...
记录一下本地源码安装部署ThingsBoard可能踩到的坑

记录一下本地源码安装部署ThingsBoard可能踩到的坑

使用git下载源码后, 必须运行 mvn clean install -DskipTests这一步很重要, 有很多文件需要初始化, 如果直接放入idea可能存在各种问题, 最好是用命令行执行 初始化时, 可能报错停止, 这个一般是网络问题, 可以尝试修改maven镜像, 这是我成功构建的镜像 <!--阿里云仓库--…
阅读更多...
膜结构建筑：未来体育可持续发展的绿色引擎

膜结构建筑：未来体育可持续发展的绿色引擎

随着城市化的飞速发展&#xff0c;现代建筑迫切需要创新性的解决方案&#xff0c;而膜结构建筑以其独特的设计理念和可持续性特点&#xff0c;正在成为未来城市发展的重要引擎。本文将深入探讨膜结构建筑在可持续城市发展中的关键作用&#xff0c;包括其在节能减排、资源有效利…
阅读更多...
“分割“安卓用户，对标iOS，鸿蒙崛起~

“分割“安卓用户，对标iOS，鸿蒙崛起~

近期关于**“华为于明年推出不兼容安卓的鸿蒙版本”**的消息传出&#xff0c;引起了业界的热议关注。自从2019年8月&#xff0c;美国制裁下&#xff0c;华为不再能够获得谷歌安卓操作系统相关付费服务&#xff0c;如此情况下&#xff0c;华为“备胎”鸿蒙操作系统一夜转正。 华…
阅读更多...
Swift 中 User Defaults 的读取和写入

Swift 中 User Defaults 的读取和写入

文章目录 前言介绍 User Defaults共享 User DefaultsUser Defaults 存储数据类型响应更改监控 User Defaults 更改覆盖User Defaults 设置考虑的替代方案Keychain 用于安全性用于跨平台的 CloudKit 结论 前言 User Defaults 是 Swift 应用程序存储在应用启动之间保持的首选项的…
阅读更多...
音视频学习（二十）——rtsp收流(udp方式)

音视频学习（二十）——rtsp收流(udp方式)

前言 本文主要介绍通过udp方式实现rtsp拉流。 流程图 流程说明&#xff1a; 相较于tcp方式“信令数据”复用同一连接拉流&#xff0c;udp方式拉流“信令数据”采用不同的连接&#xff0c;信令传输采用tcp&#xff0c;流数据传输采用udp&#xff1b;客户端向服务端&#xff0…
阅读更多...
Android平板还能编程？Ubuntu本地安装code-server远程编程写代码

Android平板还能编程？Ubuntu本地安装code-server远程编程写代码

文章目录 1.ubuntu本地安装code-server2. 安装cpolar内网穿透3. 创建隧道映射本地端口4. 安卓平板测试访问5.固定域名公网地址6.结语 1.ubuntu本地安装code-server 准备一台虚拟机,Ubuntu或者centos都可以&#xff0c;这里以VMwhere ubuntu系统为例 下载code server服务,浏览器…
阅读更多...
毕设：《基于hive的音乐数据分析系统的设计与实现》

毕设：《基于hive的音乐数据分析系统的设计与实现》

文章目录 环境启动一、爬取数据1.1、歌单信息1.2、每首歌前20条评论1.3、排行榜 二、搭建环境1.1、搭建JAVA1.2、配置hadoop1.3、配置Hadoop环境&#xff1a;YARN1.4、MYSQL1.5、HIVE(数据仓库)1.6、Sqoop&#xff08;关系数据库数据迁移&#xff09; 三、hadoop配置内存四、导…
阅读更多...
原生cesium、mars3d、supermap-cesium在vue3+vite中引入

原生cesium、mars3d、supermap-cesium在vue3+vite中引入

1. 原生cesium 需要下载 yarn add cesiumyarn add vite-plugin-cesium2. mars3d 需要下载 yarn add mars3d mars3d-cesiumyarn add vite-plugin-mars3d3. supermap-cesium 只需要引入官网下载的包&#xff0c;build文件夹下的cesium&#xff0c;以及项目中引入的其他cesiu…
阅读更多...
ChatGPT 应用开发（一）ChatGPT OpenAI API 免代理调用方式（通过 Cloudflare 的 AI Gateway）

ChatGPT 应用开发（一）ChatGPT OpenAI API 免代理调用方式（通过 Cloudflare 的 AI Gateway）

前言 开发 ChatGPT 应用&#xff0c;我觉得最前置的点就是能使用 ChatGPT API 接口。首先我自己要能成功访问&#xff0c;这没问题&#xff0c;会魔法就可以本地调用。 那用户如何调用到我的应用 API 呢&#xff0c;我的理解是通过用户能访问到的中转服务器向 OpenAI 发起访问…
阅读更多...
Linux篇：进程间通信

Linux篇：进程间通信

一、进程间通信原理&#xff1a; 1、通信是有成本的&#xff1a;两个或者多个进程&#xff0c;实现数据层面的交互&#xff0c;因为进程独立性的存在&#xff0c;导致进程通信的成本比较高。 2、进程间通信的方式&#xff1a; ①基本数据 ②发送命令 ③某种协同 ④通知 .....…
阅读更多...
C++新经典模板与泛型编程：用成员函数重载实现std::is_class

C++新经典模板与泛型编程：用成员函数重载实现std::is_class

用成员函数重载实现is_class std::is_class功能&#xff0c;是一个C11标准中用于判断某个类型是否为一个类类型&#xff08;但不是联合类型&#xff09;的类模板。当时在讲解的时候并没有涉及std::is_class的实现代码&#xff0c;在这里实现一下。简单地书写一个IsClass类模板…
阅读更多...
Linux学习笔记7-IIC的应用和AP3216C

Linux学习笔记7-IIC的应用和AP3216C

接下来进入其他两种串行通信方式&#xff1a;SPI和I2C的学习&#xff0c;因为以后的项目中会用到这些通信方式&#xff0c;而且正点原子的开发板里面也有用I2C和SPI通信的传感器来做实例&#xff0c;分别是一个距离传感器和六轴陀螺仪&#xff0c;这样就可以很好的通过实例来学…
阅读更多...
TCP通讯

TCP通讯

第二十一章 网络通信 本章节主要讲解的是TCP和UDP两种通信方式它们都有着自己的优点和缺点 这两种通讯方式不通的地方就是TCP是一对一通信 UDP是一对多的通信方式 接下来会一一讲解 TCP通信 TCP通信方式呢 主要的通讯方式是一对一的通讯方式&#xff0c;也有着优点和缺点…
阅读更多...
maven-assembly-plugin 自定义打包

maven-assembly-plugin 自定义打包

我想把input文件夹给打包进去 pom文件 <build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-assembly-plugin</artifactId><executions><execution><!-- 配置执行器 --><i…
阅读更多...
黑苹果之主板篇

黑苹果之主板篇

一、什么是主板 主板&#xff0c;又叫主机板&#xff08;mainboard&#xff09;、系统板&#xff08;systemboard&#xff09;、或母板&#xff08;motherboard&#xff09;&#xff0c;是计算机最基本的同时也是最重要的部件之一。主板一般为矩形电路板&#xff0c;上面安装了…
阅读更多...
如何使用HadSky搭配内网穿透工具搭建个人论坛并发布至公网随时随地可访问

如何使用HadSky搭配内网穿透工具搭建个人论坛并发布至公网随时随地可访问

文章目录 前言1. 网站搭建1.1 网页下载和安装1.2 网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3 Cpolar稳定隧道&#xff08;本地设置&#xff09;2.4 公网访问测试 总结 前言 经过多年的基础…
阅读更多...
ubuntu18.04 vscode 安装 vue.volar Vue Language Features (Volar) , vue3 必备插件

ubuntu18.04 vscode 安装 vue.volar Vue Language Features (Volar) , vue3 必备插件

直接在vscode 里面下载老是失败&#xff0c;不是网络问题&#xff0c;而是vue.volar插件配置的vscode版本与vscode版本不一致导致出现安装失败 官网下载最新的 vue.volar插件 https://marketplace.visualstudio.com/ 官网搜索 vue.volar 然后打开 Vue Language Features (Vol…
阅读更多...
基于互一致性学习的半监督医学图像分割

基于互一致性学习的半监督医学图像分割

Mutual consistency learning for semi-supervised medical image segmentation 基于互一致性学习的半监督医学图像分割背景贡献半监督学习 其它缓解过拟合的方法实验方法损失函数Thinking 基于互一致性学习的半监督医学图像分割 Medical Image Analysis 81 (2022) 102530 背…
阅读更多...
排序：直接选择排序

排序：直接选择排序

直接选择排序&#xff1a; 本质&#xff1a; 直接选择排序的本质就是在数组中进行遍历挑选出最大的元素&#xff0c;讲最大的元素放到对应的位置后&#xff0c;再次选出次大的位置&#xff0c;而后又放到对应的位置..........................直到数组成为一个有序序列。 优…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站