使用vue實(shí)現(xiàn)手寫簽名功能

更新時間：2021年07月30日 10:24:32 作者：踢足球的，程序猿

這篇文章主要介紹了使用vue實(shí)現(xiàn)手寫簽名功能,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

個人實(shí)現(xiàn)截圖：

安裝：

npm install vue-esign --save

使用：

1.在main.js中引入

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="handleReset">清空畫板</button>
 
<button @click="handleGenerate">生成圖片</button>

3.說明

屬性	類型	默認(rèn)值	說明
width	Number	800	畫布寬度，即導(dǎo)出圖片的寬度
height	Number	300	畫布高度，即導(dǎo)出圖片的高度
lineWidth	4	Number	畫筆粗細(xì)
lineColor	String	#000000	畫筆顏色
bgColor	String	空	畫布背景色，為空時畫布背景透明，支持多種格式 '#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red'
isCrop	Boolean	false	是否裁剪，在畫布設(shè)定尺寸基礎(chǔ)上裁掉四周空白部分

期待已久,上原碼:

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 // 得到了簽字生成的base64圖片
    }).catch(err => { //  沒有簽名，點(diǎn)擊生成圖片時調(diào)用
      this.$message({
        message: err + ' 未簽名！',
        type: 'warning'
      })
      alert(err) // 畫布沒有簽字時會執(zhí)行這里 'Not Signned'
    })
  }
}

附：將base64轉(zhuǎn)化成圖片方法：

// 將base64，轉(zhuǎn)換成圖片
 
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
 
})
 
},

到此這篇關(guān)于使用vue實(shí)現(xiàn)手寫簽名功能的文章就介紹到這了,更多相關(guān)vue實(shí)現(xiàn)手寫簽名內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue中父子組件如何實(shí)現(xiàn)傳值
這篇文章主要介紹了Vue中父子組件如何實(shí)現(xiàn)傳值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
這篇文章主要介紹了ant design pro中可控的篩選和排序?qū)嵗?，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11

基于Vue3封裝實(shí)現(xiàn)圖片查看器

這篇文章主要為大家詳細(xì)介紹了如何基于Vue3封裝實(shí)現(xiàn)一個圖片查看器,可以點(diǎn)擊圖片放大和關(guān)閉放大的圖片,感興趣的小伙伴可以了解一下

2025-02-02

vue使用$store.commit() undefined報錯的解決

這篇文章主要介紹了vue使用$store.commit() undefined報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

2023-06-06

vuex新手進(jìn)階篇之改變state?mutations的使用

在vue的項(xiàng)目中不可避免的會使用到vuex用于數(shù)據(jù)的存儲,下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之改變state?mutations的使用,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

2022-10-10

Vue3進(jìn)行樣式Scoped和Global的設(shè)置方法

在 Vue 3 中,組件化開發(fā)成為了我們提升前端開發(fā)效率的利器,其中,樣式的管理也是一個至關(guān)重要的部分,在 Vue 中,我們會經(jīng)常使用兩種樣式作用域：Scoped 樣式和 Global 樣式,本文將通過示例代碼來介紹Vue3如何進(jìn)行樣式Scoped和Global的設(shè)置,需要的朋友可以參考下

2025-01-01