3分鐘教你用JavaScript實現(xiàn)電子簽名效果

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

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

前言

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

上面是demo展示，如何實現(xiàn)呢？一步一步教會你

步驟一：創(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");

步驟三：添加繪制功能

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

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，用于跟蹤當(dāng)前是否正在繪制。它還創(chuàng)建了三個變量，用于跟蹤鼠標(biāo)上一個位置的坐標(biāo)。當(dāng)用戶按下鼠標(biāo)時，startDrawing函數(shù)將設(shè)置isDrawing為true，并記錄當(dāng)前的坐標(biāo)。當(dāng)用戶移動鼠標(biāo)時，draw函數(shù)將繪制從上一個坐標(biāo)到當(dāng)前坐標(biāo)的線條。最后，當(dāng)用戶釋放鼠標(biāo)或?qū)⑵湟瞥霎嫴紩r，stopDrawing函數(shù)將設(shè)置isDrawing為false。

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

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

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

clearButton.addEventListener("click", clearCanvas);

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

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

最后，我們可以添加一個按鈕，使用戶能夠?qū)⒑灻４鏋閳D像。以下是代碼：

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();
}

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

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

您可能感興趣的文章: