Comment implémenter la fonction de signature manuscrite dans Vue ?

Comment implémenter la fonction de signature manuscrite dans Vue ?

Avec l'avènement du commerce électronique et de l'ère numérique, de plus en plus d'entreprises ou de particuliers ont besoin de compléter des signatures dans des documents électroniques. Si la fonction de signature manuscrite peut être implémentée dans Vue, elle apportera une grande commodité aux utilisateurs.

Cet article expliquera comment utiliser Vue et certaines bibliothèques tierces pour implémenter la fonction de signature manuscrite.

1. Préparation

Avant de commencer, vous devez préparer les outils suivants :

1. Vue.js

Vue.js est un framework MVVM frontal léger qui s'appuie sur les idées de conception d'Angular et de React. Il est très utile d’améliorer la maintenabilité et l’évolutivité des pages Web.

2. Signature Pad

Signature Pad est une bibliothèque JavaScript légère qui prend en charge la création de signatures manuscrites et la conversion de signatures en formats d'image.

3. Axios

Axios est un client HTTP basé sur Promise qui peut être utilisé dans les navigateurs et Node.js, prenant en charge diverses méthodes de requête et intercepteurs.

2. Intégrer Signature Pad

1. Utilisez npm pour installer Signature Pad

Utilisez npm pour installer la bibliothèque Signature Pad dans le projet.

npm install signature_pad --save

2. Présentation de Signature Pad

Dans Vue, vous pouvez utiliser le mot-clé import pour introduire Signature Pad. 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);
    }
  }
};

Utilisez Signature Pad pour créer une zone de dessin

Créez un élément canvas dans le modèle Vue pour que les utilisateurs puissent s'y connecter.

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);
      });
    },
    ...
  }
};

Dans le script de Vue, utilisez la méthode Mounted pour obtenir la référence de l'élément canvas et transmettez-la au Signature Pad.

rrreee

Implémenter la fonction de signature

Signature Pad fournit une série de méthodes pour gérer les opérations liées à la signature, telles que vider la zone de dessin, annuler l'opération précédente, exporter des images de signature, etc.

rrreee🎜3. Exporter l'image de signature🎜🎜Dans Vue, vous pouvez utiliser la bibliothèque Axios pour télécharger l'image de signature sur le serveur, ou vous pouvez la soumettre en utilisant un formulaire. 🎜🎜🎜Enregistrez l'image de signature en local 🎜🎜🎜Enregistrez l'image de signature dans un fichier local Vous pouvez utiliser l'attribut download de la balise <a> en HTML5. pour le télécharger. 🎜rrreee🎜🎜Télécharger l'image de signature sur le serveur🎜🎜🎜En utilisant la bibliothèque Axios, il est possible de télécharger l'image de signature sur le serveur. 🎜rrreee🎜4. Résumé🎜🎜Cet article explique comment intégrer la bibliothèque Signature Pad dans Vue pour réaliser la fonction de signature manuscrite, et explique également comment exporter l'image de signature en local ou la télécharger sur le serveur. 🎜🎜Grâce à la méthode ci-dessus, la fonction de signature manuscrite peut être facilement implémentée dans l'application Vue, permettant aux utilisateurs d'effectuer des opérations de signature plus facilement. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!