vue 使用 canvas 實現手寫電子簽名
功能
- 兼容 PC 和 Mobile;
- 畫布自適應屏幕大小變化(窗口縮放、屏幕旋轉時畫布無需重置,自動校正坐標偏移);
- 自定義畫布尺寸(導出圖尺寸),畫筆粗細、顏色,畫布背景色;
- 支持裁剪 (針對需求:有的簽字需要裁剪掉四周空白)。
- 導出圖片格式為 base64 ;
- 示例demo
安裝
npm install vue-esign --save
使用
main.js 中引入
import vueEsign from 'vue-esign' Vue.use(vueEsign)
頁面中使用
必須設置 ref ,用來調用組件的兩個內置方法 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 | 是否裁剪,在畫布設定尺寸基礎上裁掉四周空白部分 |
兩個內置方法,通過給組件設置 ref 調用:
清空畫布
this.$refs.esign.reset()
生成圖片
this.$refs.esign.generate().then(res => { console.log(res) // base64圖片 }).catch(err => { alert(err) // 畫布沒有簽字時會執(zhí)行這里 'Not Signned' })
有任何問題請到此提issue
總結
到此這篇關于vue 使用 canvas 實現手寫電子簽名的文章就介紹到這了,更多相關vue 手寫電子簽名內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue+element 解決瀏覽器自動填充記住的賬號密碼問題
我們在做form表單的時候,會發(fā)現,瀏覽器會自動的將我們之前保存的密碼,自動的填充到表單中input 為 type="password" 的框中,如何實現此功能呢,下面小編給大家介紹下,感興趣的朋友一起看看吧2019-06-06vue.js與element-ui實現菜單樹形結構的解決方法
本文通過實例給大家介紹了vue.js與element-ui實現菜單樹形結構,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-04-04詳解vue2.0的Element UI的表格table列時間戳格式化
本篇文章主要介紹了詳解vue2.0的Element UI的表格table列時間戳格式化,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-06-06解決vant title-active-color與title-inactive-color不生效問題
這篇文章主要介紹了解決vant title-active-color與title-inactive-color不生效問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue?ELement?Table技巧表格業(yè)務需求實戰(zhàn)示例
這篇文章主要介紹了Vue?ELement?Table技巧表格業(yè)務需求實戰(zhàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11