vue canvasによる手書き電子署名

機能

はPCとMobileに対応しています.

キャンバス適応スクリーンサイズ変化(ウィンドウのズーム、スクリーンの回転時にキャンバスをリセットする必要がなく、座標オフセットを自動的に補正);

.

カスタムキャンバスサイズ(書き出し図サイズ)、ブラシの太さ、色、キャンバスの背景色、

は裁断をサポートする(需要に応じて:ある署名は4週間の空白を裁断する必要がある).

導出ピクチャフォーマットはbase64である.

例demo

インストール

npm install vue-esign --save

使用

main.jsに

を導入

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

ページでは、コンポーネントを呼び出すために必要な2つの内蔵メソッドrefとreset()を使用して、コンポーネントにgenerate()の幅を設定する必要はありません.キャンバスのstyle属性値が親要素のスタイル幅を超えていない場合、そのコンポーネントのスタイル幅は布幅であり、超えている場合、コンポーネントのスタイル幅は親要素の100%です.親要素の幅を設定するだけでいいです.

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
キャンバスの高さ(画像をエクスポートする高さ)
lineWidth
4
Number
ブラシの太さ
lineColor
String
#000000
ブラシの色
bgColor
String
空
キャンバス背景色は、空のキャンバス背景が透明で、複数のフォーマット'#ccc'、'#E 5 A 1'、'rgb(229,161,161)'、'rgba(0,0,0.6)','red'をサポートします.
isCrop
Boolean
false
カットするかどうかは、キャンバスのサイズ設定に基づいて周囲の空白部分をカットします
2つの組み込みメソッドは、コンポーネントにwidthを設定することによって呼び出されます.
キャンバスをクリア

this.$refs.esign.reset()

画像を生成

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

質問があればこちらへどうぞissue 倉庫住所