Bagaimana untuk melaksanakan fungsi tandatangan tulisan tangan dalam Vue?

Bagaimana untuk melaksanakan fungsi tandatangan tulisan tangan dalam Vue?

Dengan kemunculan e-dagang dan era digital, semakin banyak syarikat atau individu perlu melengkapkan tandatangan dalam dokumen elektronik Jika fungsi tandatangan tulisan tangan boleh dilaksanakan dalam Vue, ia akan membawa kemudahan yang besar kepada pengguna.

Artikel ini akan memperkenalkan cara menggunakan Vue dan beberapa perpustakaan pihak ketiga untuk melaksanakan fungsi tandatangan tulisan tangan.

1. Persediaan

Sebelum anda mula, anda perlu menyediakan alatan berikut:

1. Vue.js

Vue.js ialah rangka kerja MVVM bahagian hadapan yang ringan yang menggunakan idea reka bentuk Angular dan React. Ia sangat membantu untuk meningkatkan kebolehselenggaraan dan kebolehskalaan halaman web.

2. Pad Tandatangan

Pad Tandatangan ialah perpustakaan JavaScript ringan yang menyokong pembuatan tandatangan tulisan tangan dan menukar tandatangan kepada format imej.

3. Axios

Axios ialah klien HTTP berasaskan Promise yang boleh digunakan dalam penyemak imbas dan Node.js, menyokong pelbagai kaedah permintaan dan pemintas.

2. Integrasikan Pad Tandatangan

1. Gunakan npm untuk memasang Pad Tandatangan

Gunakan npm untuk memasang perpustakaan Pad Tandatangan dalam projek.

npm install signature_pad --save

2. Memperkenalkan Signature Pad

Dalam Vue, anda boleh menggunakan kata kunci import untuk memperkenalkan 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);
    }
  }
};

Gunakan Pad Tandatangan untuk mencipta kawasan lukisan

Buat elemen kanvas dalam templat Vue untuk pengguna menandatanganinya.

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

Dalam skrip Vue, gunakan kaedah mounted untuk mendapatkan rujukan elemen canvas dan hantarkannya ke Signature Pad.

rrreee

Laksanakan fungsi tandatangan

Pad Tandatangan menyediakan satu siri kaedah untuk mengendalikan operasi berkaitan tandatangan, seperti mengosongkan kawasan lukisan, membatalkan operasi sebelumnya, mengeksport imej tandatangan, dsb.

rrreee🎜3. Eksport imej tandatangan🎜🎜Dalam Vue, anda boleh menggunakan pustaka Axios untuk memuat naik imej tandatangan ke pelayan, atau anda boleh menyerahkannya menggunakan penyerahan borang. 🎜🎜🎜Simpan imej tandatangan ke setempat 🎜🎜🎜Simpan imej tandatangan ke fail setempat Anda boleh menggunakan atribut muat turun bagi teg <a> dalam HTML5. untuk memuat turunnya. 🎜rrreee🎜🎜Muat naik imej tandatangan ke pelayan🎜🎜🎜Menggunakan perpustakaan Axios adalah mungkin untuk memuat naik imej tandatangan ke pelayan. 🎜rrreee🎜4. Ringkasan🎜🎜Artikel ini memperkenalkan cara mengintegrasikan perpustakaan Signature Pad dalam Vue untuk merealisasikan fungsi tandatangan tulisan tangan, dan juga memperkenalkan cara mengeksport imej tandatangan ke setempat atau memuat naiknya ke pelayan. 🎜🎜Melalui kaedah di atas, fungsi tandatangan tulisan tangan boleh dilaksanakan dengan mudah dalam aplikasi Vue, membolehkan pengguna melakukan operasi tandatangan dengan lebih mudah. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi tandatangan tulisan tangan dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!