vueはcanvasを使って手書きの電子署名を実現します。

機能

対応PCとMobile；

キャンバス適応スクリーンサイズの変化（ウィンドウのスケーリング、スクリーンの回転時のキャンバスはリセット不要で、座標のオフセットは自動補正される）。

カスタムキャンバスサイズ（図のサイズをエクスポート）、太さ、色、キャンバス背景色。

裁断をサポートします。

は、画像フォーマットがbase 64であることを導出する。

例デモ

インストールnpm install vue-esign --save使用
main.jsに導入されます

import vueEsign from 'vue-esign'
Vue.use(vueEsign)

ページで使用
refを設定しなければならない。コンポーネントを呼び出すための2つの内蔵方法reet（）とgenerate（）は、コンポーネントにstyleの幅を高く設定する必要がない。キャンバスのwidth属性値が親要素のスタイル幅を超えていない場合、このコンポーネントのスタイル幅はキャンバス幅であり、それを超えると、グループスタイルの幅は親要素の100%である。親要素の幅を設定すればいいです。

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

data () {
 return {
 lineWidth: 6,
 lineColor: '#000000',
 bgColor: '',
 resultImg: '',
 isCrop: false
 }
},
methods: {
 handleReset () {
 this.$refs.esign.reset()
 },
 handleGenerate () {
 this.$refs.esign.generate().then(res => {
 this.resultImg = res
 }).catch(err => {
 alert(err) //              'Not Signned'
 })
 }
}

説明
属性
タイプ
標準値
説明
width
Number
800
キャンバスの幅、つまり画像の幅をエクスポートします。
height
Number
300
キャンバスの高さは、画像の高さを引き出します。
ラインWidth
4
Number
筆の太さ
LINE Color
String
ヽoo。ツ
ブラシの色
bgColor
String
空
キャンバスの背景色は、空の時のキャンバスの背景が透明で、多様なフォーマットをサポートしています。
isCrop
ボロア
false
裁断するかどうかは、画布の寸法を設定した上で、周りの空白部分をカットします。
二つの内蔵方法は、セットにrefを設定することにより呼び出します。
空のキャンバスthis.$refs.esign.reset() 画像を生成

this.$refs.esign.generate().then(res => {
 console.log(res) // base64  
}).catch(err => {
 alert(err) //              'Not Signned'
})

何か質問がありましたら、ここに提出してください。

締め括りをつける
以上で、vueがcanvasを使って手書きの電子署名を実現する文章について紹介しました。vueに関する手書きの電子署名の内容は以前の文章を検索したり、下記の関連文章を引き続き閲覧したりしてください。これからもよろしくお願いします。