Rumah > Artikel > hujung hadapan web > 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:
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.
Pad Tandatangan ialah perpustakaan JavaScript ringan yang menyokong pembuatan tandatangan tulisan tangan dan menukar tandatangan kepada format imej.
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
Gunakan npm untuk memasang perpustakaan Pad Tandatangan dalam projek.
npm install signature_pad --save
Dalam Vue, anda boleh menggunakan kata kunci import
untuk memperkenalkan Signature Pad. import
关键字将Signature Pad引入进来。
import SignaturePad from '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); } };
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
库将签名图像上传到服务器,也可以使用表单提交的方式进行提交。
将签名图像保存到本地文件中,可以使用HTML5中的3499910bf9dac5ae3c52d5ede7383485
标签的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); } } };
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
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 pustakaAxios
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 3499910bf9dac5ae3c52d5ede7383485
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!