vue 使用 canvas 實現(xiàn)手寫電子簽名
更新時間：2020年03月06日 08:41:59 作者：柚子胖雞
這篇文章主要介紹了vue 使用 canvas 實現(xiàn)手寫電子簽名功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
功能
- 兼容 PC 和 Mobile；
- 畫布自適應屏幕大小變化（窗口縮放、屏幕旋轉(zhuǎn)時畫布無需重置，自動校正坐標偏移）；
- 自定義畫布尺寸（導出圖尺寸），畫筆粗細、顏色，畫布背景色；
- 支持裁剪 （針對需求：有的簽字需要裁剪掉四周空白）。
- 導出圖片格式為 base64 ；
- 示例demo
安裝
npm install vue-esign --save
使用
main.js 中引入
import vueEsign from 'vue-esign' Vue.use(vueEsign)
頁面中使用
必須設置 ref ，用來調(diào)用組件的兩個內(nèi)置方法 reset() 和 generate() 無需給組件設置 style 的寬高，如果畫布的 width 屬性值沒超出父元素的樣式寬度，則該組件的樣式寬度就是畫布寬度，超出的話，組件樣式寬度則是父元素的100%； 所以只需設置好父元素的寬度即可；
<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) // 畫布沒有簽字時會執(zhí)行這里 'Not Signned'
})
}
}
說明
| 屬性 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| width | Number | 800 | 畫布寬度，即導出圖片的寬度 |
| height | Number | 300 | 畫布高度，即導出圖片的高度 |
| lineWidth | 4 | Number | 畫筆粗細 |
| lineColor | String | #000000 | 畫筆顏色 |
| bgColor | String | 空 | 畫布背景色，為空時畫布背景透明， 支持多種格式 '#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red' |
| isCrop | Boolean | false | 是否裁剪，在畫布設定尺寸基礎上裁掉四周空白部分 |
兩個內(nèi)置方法，通過給組件設置 ref 調(diào)用：
清空畫布
this.$refs.esign.reset()
生成圖片
this.$refs.esign.generate().then(res => {
console.log(res) // base64圖片
}).catch(err => {
alert(err) // 畫布沒有簽字時會執(zhí)行這里 'Not Signned'
})
有任何問題請到此提issue
總結
到此這篇關于vue 使用 canvas 實現(xiàn)手寫電子簽名的文章就介紹到這了,更多相關vue 手寫電子簽名內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue form表單動態(tài)添加組件實戰(zhàn)案例
這篇文章主要介紹了Vue form表單動態(tài)添加組件實戰(zhàn)案例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
Vue iview-admin框架二級菜單改為三級菜單的方法
這篇文章主要介紹了Vue iview-admin框架二級菜單改為三級菜單的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue如何清除地址欄參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)拖動左側導航欄變大變小，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Element布局組件el-row和el-col的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue基于viewer實現(xiàn)的圖片查看器的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面刷新動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue 路由視圖 router-view嵌套跳轉(zhuǎn)的實現(xiàn)
這篇文章主要介紹了vue 路由視圖 router-view嵌套跳轉(zhuǎn)，主要實現(xiàn)的內(nèi)容有制作一個登錄頁面，跳轉(zhuǎn)到首頁，首頁包含菜單欄、頂部導航欄、主體，標準的后臺網(wǎng)頁格式，菜單點擊顯示不同的頁面，感興趣的小伙伴請參考下面文章內(nèi)容2021-09-09
這篇文章主要為大家介紹了VUE Token的失效處理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vuejs使用FormData實現(xiàn)ajax上傳圖片文件
本篇文章主要介紹了vuejs使用FormData實現(xiàn)ajax上傳圖片文件，具有一定的參考價值，有興趣的可以了解一下2017-08-08