您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)怎么在vue中使用canvas手寫電子簽名,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
功能
兼容 PC 和 Mobile;
畫布自適應(yīng)屏幕大小變化(窗口縮放、屏幕旋轉(zhuǎn)時(shí)畫布無需重置,自動(dòng)校正坐標(biāo)偏移);
自定義畫布尺寸(導(dǎo)出圖尺寸),畫筆粗細(xì)、顏色,畫布背景色;
支持裁剪 (針對需求:有的簽字需要裁剪掉四周空白)。
導(dǎo)出圖片格式為 base64 ;
示例demo
安裝
npm install vue-esign --save
使用
main.js 中引入
import vueEsign from 'vue-esign' Vue.use(vueEsign)
頁面中使用
必須設(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' })
關(guān)于怎么在vue中使用canvas手寫電子簽名就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。