这篇文章主要介绍了使用vue实现手写签名功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
个人实现截图：
安装：
npm install vue-esign –save
使用：
1.在main.js中引入
import vueEsign from 'vue-esign' Vue.use(vueEsign)
2.在页面中引用
<button>清空画板</button><button>生成图片</button>
3.说明
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | Number | 800
本文来源gaodai.ma#com搞#代!码网_
|
画布宽度，即导出图片的宽度 |
| 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 | 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分 |
期待已久,上原码:
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 // 得到了签字生成的base64图片 }).catch(err => { // 没有签名，点击生成图片时调用 this.$message({ message: err + ' 未签名！', type: 'warning' }) alert(err) // 画布没有签字时会执行这里 'Not Signned' }) } }
附：将base64转化成图片方法：
// 将base64，转换成图片 base64ImgtoFile(dataurl, filename = 'file') { const arr = dataurl.split(',') const mime = arr[0].match(/:(.*?);/)[1] const suffix = mime.split('/')[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], `${filename}.${suffix}`, { type: mime }) },
以上就是使用vue实现手写签名功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：使用vue实现手写签名功能
转载请注明原文链接：使用vue实现手写签名功能
