备案控制台
开发者社区 开发与运维 文章 正文

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

2023-10-19 141
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JavaScript实现手写签名，可触屏手写，支持移动端与PC端双端保存


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.效果图


文章标签：
JavaScript
前端开发
关键词：
JavaScript签名
JavaScript移动端
JavaScript pc
入冉心
目录
相关文章
阿选不出来
|
10月前
|
JavaScript 前端开发
原生JS实现移动端短信验证码功能
原生JS实现移动端短信验证码功能
阿选不出来
177 0
原生JS实现移动端短信验证码功能
兜里只有三分钱~
|
10月前
|
JavaScript
js判断是否微信PC端打开内置浏览器
js判断是否微信PC端打开内置浏览器
兜里只有三分钱~
141 0
wishCoding
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的移动端购物系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的移动端购物系统附带文章和源代码部署视频讲解等
wishCoding
29 4
基于ssm+vue.js+uniapp小程序的移动端购物系统附带文章和源代码部署视频讲解等
wishCoding
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的哈尔滨中心医院用户移动端附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的哈尔滨中心医院用户移动端附带文章和源代码部署视频讲解等
wishCoding
23 5
北原_春希
|
27天前
|
JavaScript
JS移动端设置mouseover，mouseleave有效么
JS移动端设置mouseover，mouseleave有效么
北原_春希
16 1
yqcoder
|
13天前
|
前端开发 JavaScript
前端 JS 经典：函数签名
前端 JS 经典：函数签名
yqcoder
8 0
G佳伟
|
13天前
|
移动开发 JavaScript
thinkPHP5.0开发微信H5页面分享接口signature验证失败，signature与微信 JS 接口签名校验工具返回结果不一致
thinkPHP5.0开发微信H5页面分享接口signature验证失败，signature与微信 JS 接口签名校验工具返回结果不一致
G佳伟
25 0
67vpym2vvkfhs
|
18天前
|
Web App开发 JavaScript 前端开发
一篇文章讲明白js实现移动端拖拽效果
一篇文章讲明白js实现移动端拖拽效果
67vpym2vvkfhs
9 0
北原_春希
|
27天前
|
JavaScript 前端开发
JS实现移动端的轮播图滑动事件
JS实现移动端的轮播图滑动事件
北原_春希
25 0
初九之潜龙勿用
|
2月前
|
开发框架 前端开发 JavaScript
C# 结合JavaScript实现手写板签名并上传到服务器
C# 结合JavaScript实现手写板签名并上传到服务器
初九之潜龙勿用
62 1

热门文章

最新文章

  • 1
    如何在 Ubuntu 20.04 上安装 Node.js 和 npm
  • 2
    《JavaScript高级程序设计（第3版）》阅读笔记
  • 3
    JavaScript学习之旅-10（原创）
  • 4
    js深入研究之自定义混合Mixin函数
  • 5
    再次理解js中的call函数
  • 6
    Visual Studio 2010 中JS注释制作
  • 7
    Javascript中最常用的55个经典技巧
  • 8
    你可能不需要 jQuery！使用原生 JavaScript 进行开发
  • 9
    Javascript匿名函数
  • 10
    .NET获取不到js写的cookie解决方法
  • 1
    如何将训练好的Python模型给JavaScript使用？
    31
  • 2
    熵、联合熵、相对熵、交叉熵、JS散度、互信息、条件熵
    16
  • 3
    【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
    108
  • 4
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    32
  • 5
    JavaScript的事件循环机制是其非阻塞I/O的关键
    50
  • 6
    由于JavaScript是单线程的，因此在处理大量异步操作时，需要确保不会阻塞UI线程
    40
  • 7
    史上最详细JavaScript数组去重方法(11种)
    28
  • 8
    js设计模式-观察者模式与发布/订阅模式
    39
  • 9
    js设计模式-策略模式与代理模式的应用
    43
  • 10
    深入理解JavaScript中的闭包机制
    29

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例
    • 下一篇
    2024年阿里云免费云服务器及学生三百通用额度申请教程参考