Vueを使用して手書き署名機能を実装する

'vue-esign' から vueEsign をインポートします
Vue.use(vueEsign)

<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
 
<button @click="handleReset">描画ボードをクリア</button>
 
<button @click="handleGenerate">画像を生成</button>

データ （） {
  戻る {
    線幅: 6,
    線の色: '#000000',
    背景色: ''、
    結果画像: ''、
    isCrop: 偽
  }
},
メソッド: {
  ハンドルリセット（）{
    this.$refs['esign'].reset() //キャンバスをクリアする},
  ハンドル生成() {
    this.$refs['esign'].generate().then(res => {
      this.resultImg = res // 署名によって生成された base64 イメージを取得します}).catch(err => { // 署名がない場合は、これを呼び出します。$message({
        メッセージ: err + ' 符号なし! '、
        タイプ: '警告'
      })
      alert(err) // キャンバスが署名されていない場合に実行されます'署名されていません'
    })
  }
}

// base64を画像に変換する base64ImgtoFile(dataurl, filename = 'file') {
 
定数 arr = dataurl.split(',')
 
定数 mime = arr[0].match(/:(.*?);/)[1]
 
定数サフィックス = mime.split('/')[1]
 
定数bstr = atob(arr[1])
 
n = bstr.lengthとする
 
const u8arr = 新しい Uint8Array(n)
 
(n--) {
 
u8arr[n] = bstr.charCodeAt(n)
 
}
 
新しいファイルを返します([u8arr], `${filename}.${suffix}`, {
 
タイプ: パントマイム
 
})
 
},