vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名
更新時(shí)間：2020年03月06日 08:41:59 作者：柚子胖雞
這篇文章主要介紹了vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
功能
- 兼容 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'
})
有任何問題請到此提issue
總結(jié)
到此這篇關(guān)于vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名的文章就介紹到這了,更多相關(guān)vue 手寫電子簽名內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue form表單動(dòng)態(tài)添加組件實(shí)戰(zhàn)案例
這篇文章主要介紹了Vue form表單動(dòng)態(tài)添加組件實(shí)戰(zhàn)案例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue iview-admin框架二級菜單改為三級菜單的方法
這篇文章主要介紹了Vue iview-admin框架二級菜單改為三級菜單的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue如何清除地址欄參數(shù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue實(shí)現(xiàn)拖動(dòng)左側(cè)導(dǎo)航欄變大變小
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖動(dòng)左側(cè)導(dǎo)航欄變大變小，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Element布局組件el-row和el-col的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue基于viewer實(shí)現(xiàn)的圖片查看器功能
這篇文章主要介紹了vue基于viewer實(shí)現(xiàn)的圖片查看器的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面刷新動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue 路由視圖 router-view嵌套跳轉(zhuǎn)的實(shí)現(xiàn)
這篇文章主要介紹了vue 路由視圖 router-view嵌套跳轉(zhuǎn)，主要實(shí)現(xiàn)的內(nèi)容有制作一個(gè)登錄頁面，跳轉(zhuǎn)到首頁，首頁包含菜單欄、頂部導(dǎo)航欄、主體，標(biāo)準(zhǔn)的后臺(tái)網(wǎng)頁格式，菜單點(diǎn)擊顯示不同的頁面，感興趣的小伙伴請參考下面文章內(nèi)容2021-09-09
這篇文章主要為大家介紹了VUE Token的失效處理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vuejs使用FormData實(shí)現(xiàn)ajax上傳圖片文件
本篇文章主要介紹了vuejs使用FormData實(shí)現(xiàn)ajax上傳圖片文件，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08