js 电子签名涂鸦,且支持转为png图片
背景:有个业务需要用户签署一个承诺书,电子签名,并生成图片,所以就看了一些线上签名且生成图片的技术和插件,自己研究了一下。
1. elesigncode 第三方插件
首先在github看到【elesigncode】这个现成的插件,可以实现我的业务需求。
2. elesign 自己开发的一个线上签名
看了别人做的后,我就在想这个电子涂鸦和生成图片的核心技术点是什么。然后看到了这篇文档:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502101363.html。线上涂鸦的核心,是通过canvas进行绘制,鼠标每move一下,就绘制一条线,生成图片核心是【document.getElementById(
"myCanvas"
).toDataURL(
"image/png"
)
】。
自己做的一个demo,可以实现更换笔的粗细、颜色、转为png、清空 功能。
代码仓库:github地址 : https://github.com/lishengqin/elesign
在线访问地址:https://lishengqin.github.io/elesign/#/graffiti
【npm install elesign】在项目中安装组件在项目中使用。
ps:目前有个缺陷,无法设置画布的初始值,这个正在处理。
今天有时间处理了一下初始值问题,初始值核心本质就是将 通过canvas 的 toDataURL() 方法,生成图片,然后再通过画布的drawImage方法回显出来。
3. 过程中遇到的问题:
3.1 elesign 刷头采用图片时,调用画布的canvas.toDataURL方法报错,canvas无法执行toDataURL方法:污染的画布无法输出。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库