JavaScript實現(xiàn)手寫簽名，可觸屏手寫，支持移動端與PC端雙端保存

這篇具有很好參考價值的文章主要介紹了JavaScript實現(xiàn)手寫簽名，可觸屏手寫，支持移動端與PC端雙端保存。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

js手寫簽名,javascript,開發(fā)語言,ecmascript,前端,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>
  <!-- 簽名區(qū)域 -->
  <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.創(chuàng)建兩個canvas元素，并設(shè)置它們的寬度和高度

// 創(chuàng)建兩個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.實現(xiàn)觸摸事件回調(diào)函數(shù)：startDrawing, draw和stopDrawing

// 開始繪制
function startDrawing(e) {
  e.preventDefault(); // 阻止默認事件
  var touch = e.touches[0]; // 獲取觸摸點坐標
  var rect = signatureArea.getBoundingClientRect(); // 獲取簽名區(qū)域的位置和大小
  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.實現(xiàn)繪制線段的函數(shù)：drawLine

// 繪制實線
function drawLine(x1, y1, x2, y2) {
  drawingCtx.beginPath(); // 開始一條新的路徑
  drawingCtx.moveTo(x1, y1); // 將畫筆移動到起點
  drawingCtx.lineTo(x2, y2); // 繪制一條直線到終點
  drawingCtx.lineWidth = 1; // 設(shè)置線條的寬度為1像素
  drawingCtx.strokeStyle = '#000'; // 設(shè)置線條顏色為黑色
  drawingCtx.stroke(); // 繪制線條
}

7.實現(xiàn)清除簽名的函數(shù)：clearSignature

// 清除簽名
function clearSignature() {
  drawingCtx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height); // 清除繪制畫布的內(nèi)容
  backgroundCtx.clearRect(0, 0, backgroundCanvas.width, backgroundCanvas.height); // 清除背景畫布的內(nèi)容
}

8.實現(xiàn)保存簽名的函數(shù)：saveSignature

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

  // 復(fù)制繪制的簽名到帶有白色背景的畫布
  backgroundCtx.drawImage(drawingCanvas, 0, 0);

  // 將帶有白色背景的畫布內(nèi)容轉(zhuǎn)為PNG格式的DataURL
  var dataURL = backgroundCanvas.toDataURL("image/png");

  // 創(chuàng)建一個鏈接元素并設(shè)置下載屬性
  var link = document.createElement('a');
  link.href = dataURL;
  link.download = '簽名.png'; // 設(shè)置下載文件的名稱

  // 檢查是否支持保存到相冊
  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; // 上一個觸摸點的坐標

// 創(chuàng)建兩個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);

  // 復(fù)制繪制的簽名到帶有白色背景的畫布
  backgroundCtx.drawImage(drawingCanvas, 0, 0);

  // 將帶有白色背景的畫布內(nèi)容轉(zhuǎn)為PNG格式的DataURL
  var dataURL = backgroundCanvas.toDataURL("image/png");

  // 創(chuàng)建一個鏈接元素并設(shè)置下載屬性
  var link = document.createElement('a');
  link.href = dataURL;
  link.download = '簽名.png'; // 設(shè)置下載文件的名稱

  // 檢查是否支持保存到相冊
  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.效果圖?

? js手寫簽名,javascript,開發(fā)語言,ecmascript,前端,html

js手寫簽名,javascript,開發(fā)語言,ecmascript,前端,html 文章來源地址http://www.zghlxwxcb.cn/news/detail-794243.html

到了這里，關(guān)于JavaScript實現(xiàn)手寫簽名，可觸屏手寫，支持移動端與PC端雙端保存的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！