1.JS实现

前端实现签名功能，通常是通过在页面上创建一个可绘制的区域，用户可以用鼠标或触摸设备进行签名。这个区域通常是一个元素，结合JavaScript来处理绘制和保存签名。下面是一个简单的实现步骤：

1.1. 创建HTML页面

首先，需要在页面中添加一个元素，用于用户签名。

    
    
    
    


    
Signature Pad
    
    

    Clear
    Save
    
    

1.2. 添加JavaScript来处理签名

接下来，在signature.js中编写JavaScript代码来处理签名的绘制、清除和保存。

// 获取Canvas元素和2D绘图上下文
const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
// 设定Canvas尺寸
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
// 初始化绘图状态
let drawing = false;
let lastX = 0;
let lastY = 0;
// 开始绘制
canvas.addEventListener('mousedown', (e) => {
    drawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', (e) => {
    if (!drawing) return;
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    [lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mouseup', () => drawing = false);
canvas.addEventListener('mouseout', () => drawing = false);
// 移动端支持
canvas.addEventListener('touchstart', (e) => {
    drawing = true;
    const touch = e.touches[0];
    const rect = canvas.getBoundingClientRect();
    [lastX, lastY] = [touch.clientX - rect.left, touch.clientY - rect.top];
});
canvas.addEventListener('touchmove', (e) => {
    if (!drawing) return;
    const touch = e.touches[0];
    const rect = canvas.getBoundingClientRect();
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(touch.clientX - rect.left, touch.clientY - rect.top);
    ctx.stroke();
    [lastX, lastY] = [touch.clientX - rect.left, touch.clientY - rect.top];
});
canvas.addEventListener('touchend', () => drawing = false);
// 清除Canvas
document.getElementById('clearButton').addEventListener('click', () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});
// 保存签名为图片
document.getElementById('saveButton').addEventListener('click', () => {
    const dataURL = canvas.toDataURL('image/png');
    const img = document.getElementById('savedImage');
    img.src = dataURL;
    img.style.display = 'block';
});

1.3. 关键点解释

• Canvas绘图：通过监听mousedown、mousemove、mouseup事件来检测鼠标的操作，并根据鼠标的移动轨迹在上绘制线条。
• 移动端支持：监听touchstart、touchmove和touchend事件，确保在触屏设备上也能绘制签名。
• 清除签名：通过clearRect方法清除canvas的内容。
• 保存签名：通过canvas.toDataURL()方法将签名转换为图片数据，并显示在页面上。

  1.4. 额外功能

  • 下载签名图片：可以进一步实现下载签名图片的功能，使用标签和download属性。

    const downloadButton = document.createElement('a');
    downloadButton.href = dataURL;
    downloadButton.download = 'signature.png';
    downloadButton.click();
    

    1.5. 使用库简化开发

    如果需要更加复杂和完善的功能，可以使用第三方库，例如Signature Pad，它提供了更多配置和功能。

    2.Vue实现

    在Vue项目中实现PC端和移动端的签名功能，通常会使用元素结合JavaScript绘图，或使用专门的签名组件库来简化实现。以下是实现签名功能的两个推荐方法：

    方法 1: 手动实现签名功能（使用 ）

    你可以在Vue中手动实现签名功能，类似于前端原生实现的方法。

    （1） 创建签名组件

    首先，创建一个Vue组件来处理签名功能。

    （2）关键点

    • 使用Vue的mounted钩子获取上下文，并初始化绘图环境。
    • 通过mousedown、mousemove、mouseup等事件来处理PC端的绘图操作，同时监听touchstart、touchmove等事件处理移动端的绘图。
    • saveSignature方法将签名保存为图片（base64格式），并在页面上显示。

      方法 2: 使用第三方库 Signature Pad

      Signature Pad是一个流行的JavaScript库，支持PC和移动端的签名功能，支持撤销、重做、保存等功能。可以将它集成到Vue中来简化实现。

      （1） 安装 Signature Pad

      首先通过npm安装 signature_pad 库：

      npm install signature_pad
      

      （2）创建Vue组件并使用Signature Pad

      （3）Signature Pad库的优势

      • 跨平台：支持PC端和移动端。
      • 撤销功能：你可以调用signaturePad.undo()来实现撤销功能。
      • 保存图片：提供多种格式（如PNG、JPG、SVG）来保存签名。
      • 性能优异：对于高分辨率的签名场景，提供了平滑的绘图体验。

        推荐的Vue签名组件库

        （1）vue-signature-pad

        vue-signature-pad 是一个基于 Signature Pad 的 Vue 封装，简化了签名功能的集成和使用。

        安装：

        npm install vue-signature-pad
        

        使用：

        （2）vue-canvas-signature

        vue-canvas-signature 是另一个常用的签名组件，支持多种自定义选项。

         安装：

        npm install vue-canvas-signature
        

        使用：

        总结

        • 手动实现签名功能 适合更灵活的场景，但需要较多的手动编写。
        • 使用 Signature Pad 或 vue-signature-pad 等库，可以简化实现，并提供更完善的功能，适用于PC端和移动端的签名需求。