使用vue實現手寫簽名功能
阿新 • • 發佈：2021-08-02
個人實現截圖：
安裝：
npm install -esign --save
使用：
1.在main.中引入
import vueEsign from 'vue-esign' Vue.use(vueEsign)
2.在頁面中引用
<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" /> <button @click="handleResethttp://www.cppcns.com">清空畫板</button> <button @click="handleGenerate">生成圖片&lhKVZBct;/button>
3.說明
| 屬性 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| width | Number | 800 | 畫布寬度，即匯出圖片的寬度 |
| height | Number | 300 | 畫布高度，即匯出圖片的高度 |
| lineWidth | 4 | Number | 畫筆粗細 |
| lineColor | String | #000000 | 畫筆顏色 |
| bgColor | String | 空 | 畫布背景色，為空時畫布背景透明， 支援多種格式 '#ccc'，'#E5A1A1'，'rgb(229,161,161)'，'rgba(0,.6)'，'red' |
| isCrop | Boolean | false | 是否裁剪，在畫布設定尺寸基礎上裁掉四周空白部分 |
期待已久,上原碼:
data () {
return {
lineWidth: 6,lineColor: '#000000',bgColor: '',resultImg: '',isCrop: false
}
},methods: {
handleReset () {
this.$refs['esign'].reset() //清空畫布
},handleGenerate () {
this.$refs['esign'].generate().then(res => {
hKVZBc this.resultImg = res // 得到了簽字生成的base64圖片
}).catch(err => { // 沒有簽名，點選生成圖片時呼叫
this.$message({
message: err + ' 未簽名！',type: 'warning'
})
alert(err) // 畫布沒有簽字時會執行這裡 'Not Signned'
})
}
}
附：將base64轉化成圖片方法：
// 將base64，轉換成圖片
base64ImgtoFile(dataurl,filename = 'file') {
const arr = dataurl.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const suffix = mime.split('/')[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr],`${filename}.${suffix}`,{
type: mime
})
},http://www.cppcns.com
到此這篇關於使用vue實現手寫簽名功能的文章就介紹到這了,更多相關vue實現手寫簽名內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！