vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名
功能
- 兼容 PC 和 Mobile;
- 畫布自適應(yīng)屏幕大小變化(窗口縮放、屏幕旋轉(zhuǎn)時(shí)畫布無需重置,自動(dòng)校正坐標(biāo)偏移);
- 自定義畫布尺寸(導(dǎo)出圖尺寸),畫筆粗細(xì)、顏色,畫布背景色;
- 支持裁剪 (針對(duì)需求:有的簽字需要裁剪掉四周空白)。
- 導(dǎo)出圖片格式為 base64 ;
- 示例demo
安裝
npm install vue-esign --save
使用
main.js 中引入
import vueEsign from 'vue-esign' Vue.use(vueEsign)
頁(yè)面中使用
必須設(shè)置 ref ,用來調(diào)用組件的兩個(gè)內(nèi)置方法 reset() 和 generate() 無需給組件設(shè)置 style 的寬高,如果畫布的 width 屬性值沒超出父元素的樣式寬度,則該組件的樣式寬度就是畫布寬度,超出的話,組件樣式寬度則是父元素的100%; 所以只需設(shè)置好父元素的寬度即可;
<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>
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) // 畫布沒有簽字時(shí)會(huì)執(zhí)行這里 'Not Signned' }) } }
說明
屬性 | 類型 | 默認(rèn)值 | 說明 |
---|---|---|---|
width | Number | 800 | 畫布寬度,即導(dǎo)出圖片的寬度 |
height | Number | 300 | 畫布高度,即導(dǎo)出圖片的高度 |
lineWidth | 4 | Number | 畫筆粗細(xì) |
lineColor | String | #000000 | 畫筆顏色 |
bgColor | String | 空 | 畫布背景色,為空時(shí)畫布背景透明, 支持多種格式 '#ccc','#E5A1A1','rgb(229, 161, 161)','rgba(0,0,0,.6)','red' |
isCrop | Boolean | false | 是否裁剪,在畫布設(shè)定尺寸基礎(chǔ)上裁掉四周空白部分 |
兩個(gè)內(nèi)置方法,通過給組件設(shè)置 ref 調(diào)用:
清空畫布
this.$refs.esign.reset()
生成圖片
this.$refs.esign.generate().then(res => { console.log(res) // base64圖片 }).catch(err => { alert(err) // 畫布沒有簽字時(shí)會(huì)執(zhí)行這里 'Not Signned' })
有任何問題請(qǐng)到此提issue
總結(jié)
到此這篇關(guān)于vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名的文章就介紹到這了,更多相關(guān)vue 手寫電子簽名內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue.js數(shù)據(jù)響應(yīng)式原理解析
這篇文章主要介紹了vue.js數(shù)據(jù)響應(yīng)式原理解析,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-08-08Vue+element 解決瀏覽器自動(dòng)填充記住的賬號(hào)密碼問題
我們?cè)谧鰂orm表單的時(shí)候,會(huì)發(fā)現(xiàn),瀏覽器會(huì)自動(dòng)的將我們之前保存的密碼,自動(dòng)的填充到表單中input 為 type="password" 的框中,如何實(shí)現(xiàn)此功能呢,下面小編給大家介紹下,感興趣的朋友一起看看吧2019-06-06vue.js與element-ui實(shí)現(xiàn)菜單樹形結(jié)構(gòu)的解決方法
本文通過實(shí)例給大家介紹了vue.js與element-ui實(shí)現(xiàn)菜單樹形結(jié)構(gòu),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04如何監(jiān)聽Vue項(xiàng)目報(bào)錯(cuò)的4種方式?
本文主要介紹了如何監(jiān)聽Vue項(xiàng)目報(bào)錯(cuò)的4種方式,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04詳解vue2.0的Element UI的表格table列時(shí)間戳格式化
本篇文章主要介紹了詳解vue2.0的Element UI的表格table列時(shí)間戳格式化,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-06-06Vue中mixins的使用方法以及實(shí)際項(xiàng)目應(yīng)用指南
vue中提供了一種混合機(jī)制--mixins,用來更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用,下面這篇文章主要給大家介紹了關(guān)于Vue中mixins的使用方法以及實(shí)際項(xiàng)目應(yīng)用指南,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03解決vant title-active-color與title-inactive-color不生效問題
這篇文章主要介紹了解決vant title-active-color與title-inactive-color不生效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue?ELement?Table技巧表格業(yè)務(wù)需求實(shí)戰(zhàn)示例
這篇文章主要介紹了Vue?ELement?Table技巧表格業(yè)務(wù)需求實(shí)戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11