Verwenden Sie Vue, um die Funktion für handschriftliche Signaturen zu implementieren

Persönliche Implementierungs-Screenshots:

Installieren:

npm installiere vue-esign --save

verwenden:

1. Importieren in main.js

vueEsign aus „vue-esign“ importieren
Vue.use(vueEsign)

2. Zitat auf der Seite

<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="Linienbreite" :lineColor="Linienfarbe" :bgColor.sync="bgColor" />
 
<button @click="handleReset">Zeichenbrett leeren</button>
 
<button @click="handleGenerate">Bild generieren</button>

3. Beschreibung

Eigentum	Typ	Standardwert	veranschaulichen
Breite	Nummer	800	Leinwandbreite, d. h. die Breite des exportierten Bildes
Höhe	Nummer	300	Leinwandhöhe, d. h. die Höhe des exportierten Bildes
Linienbreite	4	Nummer	Pinseldicke
Linienfarbe	Zeichenfolge	#000000	Pinselfarbe
Hintergrundfarbe	Zeichenfolge	Null	Die Hintergrundfarbe der Leinwand. Wenn sie leer ist, ist der Leinwandhintergrund transparent. Unterstützt mehrere Formate: '#ccc', '#E5A1A1', 'rgb(229, 161, 161)', 'rgba(0,0,0,.6)', 'red'
istZuschneiden	Boolescher Wert	FALSCH	Ob beschnitten werden soll, hängt von der Größe der Leinwandeinstellung ab. Schneiden Sie den leeren Bereich darum herum ab.

Lange erwartet, hier ist der Originalcode:

Daten () {
  zurückkehren {
    Zeilenbreite: 6,
    Zeilenfarbe: '#000000',
    Hintergrundfarbe: '',
    Ergebnisbild: '',
    isCrop: false
  }
},
Methoden: {
  handleReset () {
    this.$refs['esign'].reset() //Leinwand leeren},
  handleGenerate() {
    dies.$refs['esign'].generate().then(res => {
      this.resultImg = res // Holen Sie sich das durch die Signatur generierte Base64-Bild}).catch(err => { // Keine Signatur, rufen Sie this.$message({ auf
        Nachricht: err + ' Nicht signiert! ',
        Typ: "Warnung"
      })
      alert(err) // Dies wird ausgeführt, wenn die Leinwand nicht mit „Nicht signiert“ signiert ist.
    })
  }
}

Anhang : So konvertieren Sie Base64 in Bilder:

// Konvertiere Base64 in Bild base64ImgtoFile(dataurl, filename = 'file') {
 
const arr = dataurl.split(',')
 
const mime = arr[0].match(/:(.*?);/)[1]
 
Konstante Suffix = mime.split('/')[1]
 
const bstr = atob(arr[1])
 
sei n = bstr.Länge
 
const u8arr = neues Uint8Array(n)
 
während (n--) {
 
u8arr[n] = bstr.charCodeAt(n)
 
}
 
gib eine neue Datei zurück([u8arr], `${filename}.${suffix}`, {
 
Typ: Pantomime
 
})
 
},

Dies ist das Ende dieses Artikels über die Verwendung von Vue zur Implementierung der Funktion für handschriftliche Signaturen. Weitere relevante Vue-Implementierungen für Inhalte zur handschriftlichen Signatur finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Vue verwendet Canvas, um handschriftliche elektronische Signaturen zu implementieren
Vue+Element fügt Signatureffekt hinzu (auf Mobilgeräten verfügbar)
Vue Vue-Esign Signaturtafel-Demo

<<: Einrichten von VMware vSphere in VMware Workstation (Grafisches Tutorial)

>>: Tutorial zur Installation von VMware ESXi 6.0 und Bereitstellung einer virtuellen Maschine (Bild und Text)