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

個人的な実装のスクリーンショット:

インストール：

npm インストール vue-esign --save

使用：

1. main.jsにインポートする

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

2. ページ内の引用

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

3. 説明

財産	タイプ	デフォルト値	例示する
幅	番号	800	キャンバスの幅、つまりエクスポートされた画像の幅
身長	番号	300	キャンバスの高さ、つまりエクスポートされた画像の高さ
線幅	4	番号	ブラシの太さ
線の色	弦	#000000	ブラシの色
背景色	弦	ヌル	キャンバスの背景色。空の場合、キャンバスの背景は透明になります。複数の形式をサポート '#ccc'、'#E5A1A1'、'rgb(229, 161, 161)'、'rgba(0,0,0,.6)'、'red'
クロップ	ブール	間違い	キャンバス設定サイズに基づいて、周囲の空白領域を切り取るかどうか

待望のオリジナルコードはこちらです:

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

付録: base64 を画像に変換する方法:

// 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}`, {
 
タイプ: パントマイム
 
})
 
},

これで、vue を使用して手書き署名機能を実装する方法についての説明は終了です。手書き署名コンテンツの vue 実装の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: