3分鐘教你用JavaScript實現電子簽名效果

更新時間：2023年04月02日 14:08:11 作者：農民工說前端

電子簽名已經成為現代商業(yè)中不可或缺的一部分，它可以提高業(yè)務流程的效率和安全性。本文將介紹如何使用HTML5的canvas元素和JavaScript在前端實現電子簽名，需要的可以參考一下

前言

電子簽名已經成為現代商業(yè)中不可或缺的一部分，它可以提高業(yè)務流程的效率和安全性。在前端實現電子簽名可以大大簡化流程，提高用戶體驗，本文將介紹如何使用HTML5的canvas元素和JavaScript在前端實現電子簽名。

上面是demo展示，如何實現呢？一步一步教會你

步驟一：創(chuàng)建HTML和CSS

首先，我們需要在HTML中創(chuàng)建一個canvas元素，用于繪制電子簽名。我們還可以為其添加一些CSS樣式，以改善用戶體驗。以下是一個示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>電子簽名</title>
    <style>
      canvas {
        border: 1px solid black;
      }
      button {
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <canvas id="signatureCanvas" width="400" height="200"></canvas>
    <br>
    <button id="clearButton">清除簽名</button>
    <button id="saveButton">保存簽名</button>
  </body>
</html>

步驟二：獲取canvas元素和上下文對象

接下來，我們需要在JavaScript中獲取canvas元素和其上下文對象。這將使我們能夠繪制電子簽名。

const canvas = document.getElementById("signatureCanvas");
const ctx = canvas.getContext("2d");

步驟三：添加繪制功能

我們將使用鼠標來繪制電子簽名，因此我們需要添加以下事件處理程序

let isDrawing = false;
let lastX = 0;
let lastY = 0;

canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);

function startDrawing(e) {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

function draw(e) {
  if (!isDrawing) return;
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
  isDrawing = false;
}

這段代碼創(chuàng)建了一個布爾變量isDrawing，用于跟蹤當前是否正在繪制。它還創(chuàng)建了三個變量，用于跟蹤鼠標上一個位置的坐標。當用戶按下鼠標時，startDrawing函數將設置isDrawing為true，并記錄當前的坐標。當用戶移動鼠標時，draw函數將繪制從上一個坐標到當前坐標的線條。最后，當用戶釋放鼠標或將其移出畫布時，stopDrawing函數將設置isDrawing為false。

步驟四：添加清除簽名功能

為了讓用戶清除他們的簽名，我們可以添加一個按鈕，當用戶單擊該按鈕時，將清除畫布上的所有內容清除

const clearButton = document.getElementById("clearButton");

clearButton.addEventListener("click", clearCanvas);

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

步驟五：添加保存簽名功能

最后，我們可以添加一個按鈕，使用戶能夠將簽名保存為圖像。以下是代碼：

const saveButton = document.getElementById("saveButton");

saveButton.addEventListener("click", saveCanvas);

function saveCanvas() {
  const image = canvas.toDataURL("image/png");
  const link = document.createElement("a");
  link.download = "signature.png";
  link.href = image;
  link.click();
}

這段代碼獲取保存按鈕，并在其上添加一個單擊事件處理程序。當用戶單擊該按鈕時，saveCanvas函數將獲取畫布的圖像數據URL，并將其添加到一個新創(chuàng)建的鏈接元素的href屬性中。然后，它將下載該鏈接，將圖像保存為PNG文件。

到此這篇關于3分鐘教你用JavaScript實現電子簽名效果的文章就介紹到這了,更多相關JavaScript電子簽名內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: