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

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

<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>

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

// 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
 
})
 
},