vue电子签名,vue 手写
本文主要介绍利用vue实现手写签名功能。这篇文章很详细，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。
个人实现截图：
安装：
npm安装vue-设计-保存
使用：
1.main.js中介绍的
从“vue-esign”导入vue design
Vue.use(vueEsign)
2.在页面中引用
vue-esign ref= esign :width= 800 :height= 300 :is crop= is crop :line width= line color :line color= line color :bgColor . sync= bgColor /
Button @click=handleReset 清空画板/按钮
Button @click=handleGenerate 生成图片/按钮
解释
属性
类型
系统默认值
解释
宽度
数字
八百
画布宽度，即导出图片的宽度。
高度
数字
300
画布高度，即导出图片的高度。
行距
四
数字
刷子厚度
线条颜色
线
#000000
画笔颜色
背景颜色
线
空的
画布背景颜色，空白时，画布背景是透明的，
支持多种格式 #ccc ， #E5A1A1 ， rgb(229，161，161)， rgba(0，0，0， 6)，红色
isCrop
布尔代数学体系的
错误的
是否裁剪，根据设定的尺寸将画布周围的空白部分剪掉。
期待已久，上原码：
data () {
返回{
线宽：6，
line color:“# 000000”，
背景颜色： ，
结果： ，
isCrop: false
}
},
方法：{
handleReset () {
这个。$ refs [design]。reset()//清空画布
},
handleGenerate () {
这个。$refs[esign]。生成()。然后(res={
This.resultImg=res //获取带签名的base64图像
}).catch(err={//没有签名，点击生成图片时调用。
这个。$message({
消息：错误“未签名！”,
类型：“警告”
})
Alert(err) //画布未签名时，在此执行‘未签名’。
})
}
}
附:将base64转换为图片的方法：
//将base64转换为图片
base64ImgtoFile(dataurl，filename=file) {
const arr=dataurl.split(，)
const mime=arr[0]。匹配(/:(。*?);/)[1]
const suffix=mime.split(/)[1]
const bstr=atob(arr[1])
设n=bstr.length
const u8arr=new Uint8Array(n)
while (n - ) {
u8arr[n]=bstr.charCodeAt(n)
}
返回新文件([u8arr]，` ${filename}。${suffix} `，{
类型：mime
})
},
关于用vue实现手写签名的这篇文章到此为止。更多关于vue实现手写签名的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。