uniapp,使用canvas制作一个签名版

先看效果图

uniapp,使用canvas制作一个签名版_第1张图片

 我把这个做成了页面,没有做成组件,因为之前我是配合uview-plus的popup弹出层使用的,这种组件好像是没有生命周期的,第一次打开弹出层可以正常写字,但是关闭之后再打开就不会显示绘制的线条了,还需要重新加载组件的父页面才可以重新写字,所以我又做成了页面,功能就正常了。

代码实现:


 

 

 在H5中,点击确定后输出为base64,在APP中输出为临时路径的png图片,我是在APP中使用,所以还需要把png图片转为base64,格式按后端要求,如果只需要传图片就不需要转base64了,也可以转svg,转svg的我注释掉了,用到的图片转换插件为image-tools。

如果大家在使用过程中发现了什么问题,欢迎在评论区指正,谢谢观看!

你可能感兴趣的:(uniapp移动端,uni-app,canva可画)