vue 使用 canvas 实现手写电子签名

2023-07-29 18:01:04 278

功能

兼容PC和Mobile；
画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标偏移）；
自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色；
支持裁剪（针对需求：有的签字需要裁剪掉四周空白）。
导出图片格式为base64；
示例demo

安装

npminstallvue-esign--save

使用

main.js中引入

importvueEsignfrom'vue-esign'
Vue.use(vueEsign)

页面中使用

必须设置ref，用来调用组件的两个内置方法reset()和generate()无需给组件设置style的宽高，如果画布的width属性值没超出父元素的样式宽度，则该组件的样式宽度就是画布宽度，超出的话，组件样式宽度则是父元素的100%；所以只需设置好父元素的宽度即可；


清空画板
生成图片

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)//画布没有签字时会执行这里'NotSignned'
})
}
}

说明

属性	类型	默认值	说明
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)//画布没有签字时会执行这里'NotSignned'
})

有任何问题请到此提issue

总结

到此这篇关于vue使用canvas实现手写电子签名的文章就介绍到这了,更多相关vue手写电子签名内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue 使用 canvas 实现手写电子签名

热门推荐

随机推荐