canvas在线签名插件

最新推荐文章于 2024-08-30 16:29:29 发布

发呆o

最新推荐文章于 2024-08-30 16:29:29 发布

阅读量493

点赞数

分类专栏： js基础 css 文章标签： js canvas plugin javascript html5

本文链接：https://blog.csdn.net/qq_38109594/article/details/119221461

版权

本文讲述了作者如何为满足在线签字需求，自制一个canvas签名插件的过程。通过分析签名的组成，利用canvas API实现画线、设置画笔样式和导出JSON等功能，并进行了性能优化，确保在移动端和PC端的流畅使用。文章提供了关键代码示例和完整项目的链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于

原文地址：掘金-canvas在线签名插件
插件地址github：https://github.com/javascript-wei/canvas-sign
体验预览：canvas-sign

背景

最近临时接到一个需求，需要客户方在线签字然后保存到服务器，功能大致有撤销（也就是笔画的每一笔都需要支持撤销）、更改签字颜色、移动端和pc端都支持。因为紧急需求，有现成的插件当然是最好的，毕竟学会偷懒也是一门技巧（滑稽），临时找了一个jSignature第三方的签名插件，仔细研究了一下发现该插件依赖复杂，使用该插件还需要引入jQuery，因为整个项目都能没有引入jquery，插件源码也是ES5，甚至还是ES3，当时我就犹豫了，不能因为一个签名引入这么复杂的插件吧。
因为本次需求最终就只需要一张图片保存到后台，也不需数字证书验证部分之类的，对于喜欢动手（完全是被逼）的我来说，这完全可以自己写啊。因为需求是周五出的，然后下周二就要，看来周末又是一个悄悄加班的日子。

分析

签名是若干操作的集合，起于用户手写姓名，终止于签名图片上传，中间还包含图片的处理，比如说减少锯齿、撤销、预览等，除了canvas绝无二选。

手撕

从整个交互上看，开始绘制时候需要定义起始点touchstart(移动端开始)、mousedown(pc鼠标按下)，为了完成绘制，还需要处理手指移动或鼠标移动，监听处理两个事件touchmove(移动端)、mousemove(PC端)。

       const handleMove = (e) => {
   
            this.creat({
    x: e.clientX - left + 0.5, y: e.clientY - top + 0.5 });
        }
        const handleDown = (e) => {
   
            this.creat({
    x: e.clientX - left + 0.5, y: e.clientY - top + 0.5 });
        }
        constf fn = {
   
            mousedown: handleDown,
            mousemove: handleMove,

最低0.47元/天解锁文章