使用vue實(shí)現(xiàn)手寫(xiě)簽名功能
更新時(shí)間：2021年07月30日 10:24:32 作者：踢足球的，程序猿
這篇文章主要介紹了使用vue實(shí)現(xiàn)手寫(xiě)簽名功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
個(gè)人實(shí)現(xiàn)截圖：
安裝：
npm install vue-esign --save
使用：
1.在main.js中引入
import vueEsign from 'vue-esign' Vue.use(vueEsign)
2.在頁(yè)面中引用
<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" /> <button @click="handleReset">清空畫(huà)板</button> <button @click="handleGenerate">生成圖片</button>
3.說(shuō)明
| 屬性 | 類(lèi)型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| width | Number | 800 | 畫(huà)布寬度，即導(dǎo)出圖片的寬度 |
| height | Number | 300 | 畫(huà)布高度，即導(dǎo)出圖片的高度 |
| lineWidth | 4 | Number | 畫(huà)筆粗細(xì) |
| lineColor | String | #000000 | 畫(huà)筆顏色 |
| bgColor | String | 空 | 畫(huà)布背景色，為空時(shí)畫(huà)布背景透明， 支持多種格式 '#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red' |
| isCrop | Boolean | false | 是否裁剪，在畫(huà)布設(shè)定尺寸基礎(chǔ)上裁掉四周空白部分 |
期待已久,上原碼:
data () {
return {
lineWidth: 6,
lineColor: '#000000',
bgColor: '',
resultImg: '',
isCrop: false
}
},
methods: {
handleReset () {
this.$refs['esign'].reset() //清空畫(huà)布
},
handleGenerate () {
this.$refs['esign'].generate().then(res => {
this.resultImg = res // 得到了簽字生成的base64圖片
}).catch(err => { // 沒(méi)有簽名，點(diǎn)擊生成圖片時(shí)調(diào)用
this.$message({
message: err + ' 未簽名！',
type: 'warning'
})
alert(err) // 畫(huà)布沒(méi)有簽字時(shí)會(huì)執(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)手寫(xiě)簽名功能的文章就介紹到這了,更多相關(guān)vue實(shí)現(xiàn)手寫(xiě)簽名內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue中父子組件如何實(shí)現(xiàn)傳值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3封裝實(shí)現(xiàn)一個(gè)圖片查看器,可以點(diǎn)擊圖片放大和關(guān)閉放大的圖片,感興趣的小伙伴可以了解一下
2025-02-02 
vue使用$store.commit() undefined報(bào)錯(cuò)的解決
這篇文章主要介紹了vue使用$store.commit() undefined報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06 
vuex新手進(jìn)階篇之改變state?mutations的使用
在vue的項(xiàng)目中不可避免的會(huì)使用到vuex用于數(shù)據(jù)的存儲(chǔ),下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之改變state?mutations的使用,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10 
Vue3進(jìn)行樣式Scoped和Global的設(shè)置方法
在 Vue 3 中,組件化開(kāi)發(fā)成為了我們提升前端開(kāi)發(fā)效率的利器,其中,樣式的管理也是一個(gè)至關(guān)重要的部分,在 Vue 中,我們會(huì)經(jīng)常使用兩種樣式作用域：Scoped 樣式和 Global 樣式,本文將通過(guò)示例代碼來(lái)介紹Vue3如何進(jìn)行樣式Scoped和Global的設(shè)置,需要的朋友可以參考下
2025-01-01 
路由導(dǎo)航守衛(wèi)提供了一些鉤子函數(shù),可以在路由導(dǎo)航過(guò)程中進(jìn)行攔截和控制,其中,beforeEach 導(dǎo)航守衛(wèi)可以在每次路由切換前被觸發(fā),本文給大家介紹Vue路由守衛(wèi)詳解,感興趣的朋友一起看看吧
2023-10-10 
vue獲取當(dāng)前點(diǎn)擊的元素并傳值的實(shí)例
下面小編就為大家分享一篇vue獲取當(dāng)前點(diǎn)擊的元素并傳值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03 
vue.js樣式布局Flutter業(yè)務(wù)開(kāi)發(fā)常用技巧
這篇文章主要為大家介紹了vue.js樣式布局Flutter業(yè)務(wù)開(kāi)發(fā)中的常用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪
2021-11-11 
這篇文章主要介紹了vue中$set與$delete的使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10