大家好，我是Echa。

创作不易，喜欢的老铁们加个关注，点个赞，后面会持续更新干货，速速收藏，谢谢！

在现在的时代发展中，从以前的手写签名，逐渐衍生出了电子签名。电子签名和纸质手写签名一样具有法律效应。电子签名目前主要还是在需要个人确认的产品环节和司法类相关的产品上较多。

举个常用的例子，大家都用过钉钉，钉钉上面就有电子签名，相信大家这肯定是知道的。

那作为前端的我们如何实现电子签名呢？其实在html5中已经出现了一个重要级别的辅助标签，是啥呢？那就是canvas。下面我给大家分享分享几个关于前端如何实现电子签名经典案例以及实现方法。

什么是canvas

Canvas（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

大白话就是canvas是一个可以在上面通过javaScript画图的标签，通过其提供的context(上下文)及Api进行绘制，在这个过程中canvas充当画布的角色。

实现电子签名

知道几何的朋友都很清楚，线由点绘成，面由线绘成。

多点成线，多线成面。

所以我们实际只需要拿到当前触摸的坐标点，进行成线处理就可以了。

全文大纲

• vue-//imgq01.71396.com/bl/xg/233f4def5c875875.jpg-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板
• //imgq01.71396.com/bl/xg/233f4def5c875875.jpgature Pad 是一个用于绘制平滑签名的JavaScript库。
• 纯JavaScript实现电子签名，同时支持Web端和移动端。

vue-//imgq01.71396.com/bl/xg/233f4def5c875875.jpg-canvas

在线预览：https://langyuxiansheng.github.io/vue-//imgq01.71396.com/bl/xg/233f4def5c875875.jpg-canvas/

Github：https://github.com/langyuxiansheng/vue-//imgq01.71396.com/bl/xg/233f4def5c875875.jpg-canvas

vue-//imgq01.71396.com/bl/xg/233f4def5c875875.jpg-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端,属性支持自定义配置

组件模板使用

横屏全屏模式下签名要怎么显示?

如下图：

//imgq01.71396.com/bl/xg/233f4def5c875875.jpgature Pad

在线预览：http://szimek.github.io///imgq01.71396.com/bl/xg/233f4def5c875875.jpgature_pad/

Github：https://github.com/szimek///imgq01.71396.com/bl/xg/233f4def5c875875.jpgature_pad

//imgq01.71396.com/bl/xg/233f4def5c875875.jpgature Pad是一个用于绘制平滑签名的JavaScript库。它基于HTML5画布，使用基于Square发布的Smoother //imgq01.71396.com/bl/xg/233f4def5c875875.jpgatures的可变宽度Bézier曲线插值。它适用于所有现代桌面和移动浏览器，不依赖任何外部库。

核心代码：

const canvas = document.querySelector("canvas");

const //imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad = new //imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad(canvas);

// Returns //imgq01.71396.com/bl/xg/233f4def5c875875.jpgature image as data URL (see https://mdn.io/todataurl for the list of possible parameters)
//imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.toDataURL(); // save image as PNG
//imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.toDataURL("image/jpeg"); // save image as JPEG
//imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.toDataURL("image/jpeg", 0.5); // save image as JPEG with 0.5 image quality
//imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.toDataURL("image/svg+xml"); // save image as SVG data url

// Return svg string without converting to base64
//imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.toSVG(); // ""
//imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.toSVG({includeBackgroundColor: true}); // add background color to svg output

// Draws //imgq01.71396.com/bl/xg/233f4def5c875875.jpgature image from data URL (mostly uses https://mdn.io/drawImage under-the-hood)
// NOTE: This method does not populate internal data structure that represents drawn //imgq01.71396.com/bl/xg/233f4def5c875875.jpgature. Thus, after using #fromDataURL, #toData won't work properly.
//imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");

// Draws //imgq01.71396.com/bl/xg/233f4def5c875875.jpgature image from data URL and alters it with the given options
//imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.fromDataURL("data:image/png;base64,iVBORw0K...", { ratio: 1, width: 400, height: 200, xOffset: 100, yOffset: 50 });

// Returns //imgq01.71396.com/bl/xg/233f4def5c875875.jpgature image as an array of point groups
const data = //imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.toData();

// Draws //imgq01.71396.com/bl/xg/233f4def5c875875.jpgature image from an array of point groups
//imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.fromData(data);

// Draws //imgq01.71396.com/bl/xg/233f4def5c875875.jpgature image from an array of point groups, without clearing your existing image (clear defaults to true if not provided)
//imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.fromData(data, { clear: false });

// Clears the canvas
//imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.clear();

// Returns true if canvas is empty, otherwise returns false
//imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.isEmpty();

// Unbinds all event handlers
//imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.off();

// Rebinds all event handlers
//imgq01.71396.com/bl/xg/233f4def5c875875.jpgaturePad.on();

如下图：

纯JavaScript实现电子签名

完整版：

    
    
    
    
    


    
    
        取消
        保存
    

各内核和浏览器支持情况

Mozilla 程序从 Gecko 1.8 (Firefox 1.5 (en-US)) 开始支持 。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 从 IE9 开始支持 ，更旧版本的 IE 中，页面可以通过引入 Google 的 Explorer Canvas 项目中的脚本来获得支持。Google Chrome 和 Opera 9+ 也支持 。

小程序中提示

在小程序中我们如果需呀实现的话，也是同样的原理哦，只是我们需要将创建实例和上下文的Api进行修改，因为小程序中是没有dom，既然没有dom，哪来的操作dom这个操作呢。

• 如果是uni-app则需要使用uni.createCanvasContext进行上下文创建
• 如果是原生微信小程序则使用wx.createCanvasContext进行创建（2.9.0）之后的库不支持