Rumah hujung hadapan web View.js Bagaimana untuk melaksanakan fungsi tandatangan tulisan tangan dalam Vue?

Bagaimana untuk melaksanakan fungsi tandatangan tulisan tangan dalam Vue?

Jun 25, 2023 pm 07:40 PM
vue Realisasi fungsi tandatangan tulisan tangan

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.

  1. Pad Tandatangan

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

  1. 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
Salin selepas log masuk
  1. Memperkenalkan Signature Pad

Dalam Vue, anda boleh menggunakan kata kunci import untuk memperkenalkan Signature Pad. import关键字将Signature Pad引入进来。

import SignaturePad from 'signature_pad';
Salin selepas log masuk
  1. 使用Signature Pad创建一个绘制区域

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

<template>
  <div>
    <canvas ref="canvas" :width="width" :height="height"></canvas>
  </div>
</template>
Salin selepas log masuk

在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);
  }
};
Salin selepas log masuk
  1. 实现签名功能

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();
    }
  }
};
Salin selepas log masuk

三、导出签名图像

在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);
    }
  }
};
Salin selepas log masuk

    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);
      });
    },
    ...
  }
};
Salin selepas log masuk
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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan echarts dalam vue Cara menggunakan echarts dalam vue May 09, 2024 pm 04:24 PM

Cara menggunakan echarts dalam vue

Peranan lalai eksport dalam vue Peranan lalai eksport dalam vue May 09, 2024 pm 06:48 PM

Peranan lalai eksport dalam vue

Cara menggunakan fungsi peta dalam vue Cara menggunakan fungsi peta dalam vue May 09, 2024 pm 06:54 PM

Cara menggunakan fungsi peta dalam vue

Perbezaan antara acara dan $event dalam vue Perbezaan antara acara dan $event dalam vue May 08, 2024 pm 04:42 PM

Perbezaan antara acara dan $event dalam vue

Peranan onmounted dalam vue Peranan onmounted dalam vue May 09, 2024 pm 02:51 PM

Peranan onmounted dalam vue

Perbezaan antara eksport dan eksport lalai dalam vue Perbezaan antara eksport dan eksport lalai dalam vue May 08, 2024 pm 05:27 PM

Perbezaan antara eksport dan eksport lalai dalam vue

Apakah cangkuk dalam vue Apakah cangkuk dalam vue May 09, 2024 pm 06:33 PM

Apakah cangkuk dalam vue

Dipasang dalam vue sepadan dengan kitaran hayat yang bertindak balas Dipasang dalam vue sepadan dengan kitaran hayat yang bertindak balas May 09, 2024 pm 01:42 PM

Dipasang dalam vue sepadan dengan kitaran hayat yang bertindak balas

See all articles