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

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

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

個人實(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)示例（也叫控制文字展開隱藏），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
詳解vue 數(shù)據(jù)傳遞的方法
這篇文章給大家介紹了vue數(shù)據(jù)傳遞的方法，包括，父組件向子組件傳值，子組件向父組件傳值，路由傳值等多種方法，需要的朋友參考下
2018-04-04
Vue開發(fā)項(xiàng)目中如何使用Font Awesome 5
Font Awesome是一套流行的圖標(biāo)字體庫,我們在實(shí)際開發(fā)的過程中會經(jīng)常遇到需要使用圖標(biāo)的場景,對于一些常用的圖標(biāo),我們可以直接在Font Awesome中找到并且使用,這篇文章主要給大家介紹了關(guān)于Vue開發(fā)項(xiàng)目中如何使用Font Awesome5的相關(guān)資料,需要的朋友可以參考下
2021-11-11
Vue圖片裁剪功能實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue圖片裁剪功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-08-08
Vue中實(shí)現(xiàn)v-for循環(huán)遍歷圖片的方法
這篇文章主要介紹了Vue中實(shí)現(xiàn)v-for循環(huán)遍歷圖片的方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue實(shí)現(xiàn)將數(shù)據(jù)庫中帶html標(biāo)簽的內(nèi)容輸出(原始HTML(Raw HTML))
今天小編就為大家分享一篇Vue實(shí)現(xiàn)將數(shù)據(jù)庫中帶html標(biāo)簽的內(nèi)容輸出(原始HTML(Raw HTML))，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
vue導(dǎo)出少量pdf文件實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了vue導(dǎo)出少量pdf文件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
vue中template的三種寫法示例
這篇文章主要介紹了vue中template的三種寫法示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下
2020-10-10
vuex模塊獲取數(shù)據(jù)及方法的簡單示例
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于vuex模塊獲取數(shù)據(jù)及方法的相關(guān)資料,需要的朋友可以參考下
2023-03-03
如何將iconfont圖標(biāo)引入到vant的Tabbar標(biāo)簽欄里邊
這篇文章主要介紹了如何將iconfont圖標(biāo)引入到vant的Tabbar標(biāo)簽欄里邊，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04