Wie implementiert man die handschriftliche Signaturfunktion in Vue?

Wie implementiert man die handschriftliche Signaturfunktion in Vue?

Mit dem Aufkommen des E-Commerce und des digitalen Zeitalters müssen immer mehr Unternehmen oder Einzelpersonen Unterschriften in elektronischen Dokumenten ausfüllen. Wenn die handschriftliche Signaturfunktion in Vue implementiert werden kann, wird dies den Benutzern großen Komfort bieten.

In diesem Artikel wird erläutert, wie Sie Vue und einige Bibliotheken von Drittanbietern verwenden, um die Funktion für handschriftliche Signaturen zu implementieren.

1. Vorbereitung

Bevor Sie beginnen, müssen Sie die folgenden Tools vorbereiten:

1. Vue.js

Vue.js ist ein leichtes Front-End-MVVM-Framework, das auf den Designideen von Angular und React basiert. Es ist sehr hilfreich, die Wartbarkeit und Skalierbarkeit von Webseiten zu verbessern.

2. Signature Pad

Signature Pad ist eine leichte JavaScript-Bibliothek, die das Erstellen handschriftlicher Signaturen und das Konvertieren von Signaturen in Bildformate unterstützt.

3. Axios

Axios ist ein Promise-basierter HTTP-Client, der in Browsern und Node.js verwendet werden kann und verschiedene Anforderungsmethoden und Interceptors unterstützt.

2. Signature Pad integrieren

1. Verwenden Sie npm, um Signature Pad zu installieren

Verwenden Sie npm, um die Signature Pad-Bibliothek im Projekt zu installieren.

npm install signature_pad --save

2. Wir stellen vor: Signature Pad

In Vue können Sie das Schlüsselwort import verwenden, um Signature Pad einzuführen. import关键字将Signature Pad引入进来。

import SignaturePad from 'signature_pad';

3. 使用Signature Pad创建一个绘制区域

在Vue的模板中创建一个canvas元素，用于用户在上面签名。

<template>
  <div>
    <canvas ref="canvas" :width="width" :height="height"></canvas>
  </div>
</template>

在Vue的script中，使用mounted方法获取canvas元素的引用，并将其传递给Signature Pad。

import SignaturePad from 'signature_pad';

export default {
  name: 'Signature',
  data() {
    return {
      width: 500,
      height: 300
    };
  },
  mounted() {
    const canvas = this.$refs.canvas;
    this.signaturePad = new SignaturePad(canvas);
  }
};

4. 实现签名功能

Signature Pad提供了一系列方法，用于处理签名相关操作，如清空绘制区域，撤销上一步操作，导出签名图像等。

export default {
  name: 'Signature',
  ...
  methods: {
    // 清空绘制区域
    clear() {
      this.signaturePad.clear();
    },
    // 撤销上一步操作
    undo() {
      const data = this.signaturePad.toData();
      if (data) {
        data.pop();
        this.signaturePad.fromData(data);
      }
    },
    // 判断绘图区域是否为空
    isEmpty() {
      return this.signaturePad.isEmpty();
    },
    // 获取签名图像的base64编码
    getDataUrl() {
      return this.signaturePad.toDataURL();
    }
  }
};

三、导出签名图像

在Vue中，可以使用Axios库将签名图像上传到服务器，也可以使用表单提交的方式进行提交。

1. 将签名图像保存到本地

将签名图像保存到本地文件中，可以使用HTML5中的<a>标签的download

export default {
  name: 'Signature',
  ...
  methods: {
    ...
    // 下载签名图像
    download() {
      const link = document.createElement('a');
      link.href = this.getDataUrl();
      link.download = 'signature.png';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};

Verwenden Sie Signature Pad, um einen Zeichenbereich zu erstellen

Erstellen Sie ein canvas-Element in der Vue-Vorlage, damit Benutzer darauf signieren können.

import axios from 'axios';

export default {
  name: 'Signature',
  ...
  methods: {
    ...
    // 将签名图像上传到服务器
    upload() {
      const dataUrl = this.getDataUrl();
      const blob = this.dataURItoBlob(dataUrl);
      const formData = new FormData();
      formData.append('file', blob, 'signature.png');

      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        console.log(res.data);
      }).catch(err => {
        console.log(err);
      });
    },
    ...
  }
};

Verwenden Sie im script von Vue die Methode mount, um die Referenz des canvas-Elements abzurufen und an das Signature Pad zu übergeben.

rrreee

Signaturfunktion implementieren

Signature Pad bietet eine Reihe von Methoden zur Handhabung signaturbezogener Vorgänge, z. B. das Löschen des Zeichenbereichs, das Rückgängigmachen des vorherigen Vorgangs, das Exportieren von Signaturbildern usw.

rrreee🎜3. Signaturbild exportieren🎜🎜In Vue können Sie die Axios-Bibliothek verwenden, um das Signaturbild auf den Server hochzuladen, oder Sie können es per Formularübermittlung übermitteln. 🎜🎜🎜Speichern Sie das Signaturbild lokal. 🎜🎜🎜Speichern Sie das Signaturbild in einer lokalen Datei. Sie können das download-Attribut des <a>-Tags in HTML5 verwenden um es herunterzuladen. 🎜rrreee🎜🎜Signaturbild auf den Server hochladen🎜🎜🎜Mit der Axios-Bibliothek ist es möglich, ein Signaturbild auf den Server hochzuladen. 🎜rrreee🎜4. Zusammenfassung🎜🎜In diesem Artikel wird erläutert, wie Sie die Signature Pad-Bibliothek in Vue integrieren, um die Funktion der handschriftlichen Unterschrift zu realisieren, und wie Sie das Signaturbild lokal exportieren oder auf den Server hochladen. 🎜🎜Durch die oben beschriebene Methode kann die handschriftliche Signaturfunktion einfach in der Vue-Anwendung implementiert werden, sodass Benutzer Signaturvorgänge bequemer durchführen können. 🎜

Das obige ist der detaillierte Inhalt vonWie implementiert man die handschriftliche Signaturfunktion in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!