一文解读前端实现电子签名

　　大家好，我是Echa。
　　创作不易，喜欢的老铁们加个关注，点个赞，后面会持续更新干货，速速收藏，谢谢！
　　在现在的时代发展中，从以前的手写签名，逐渐衍生出了电子签名。电子签名和纸质手写签名一样具有法律效应。电子签名目前主要还是在需要个人确认的产品环节和司法类相关的产品上较多。
　　举个常用的例子，大家都用过钉钉，钉钉上面就有电子签名，相信大家这肯定是知道的。
　　那作为前端的我们如何实现电子签名呢？其实在html5中已经出现了一个重要级别的辅助标签，是啥呢？那就是canvas。下面我给大家分享分享几个关于前端如何实现电子签名经典案例以及实现方法。什么是canvas
　　Canvas（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas对象表示一个HTML画布元素。它没有自己的行为，但是定义了一个API支持脚本化客户端绘图操作。
　　大白话就是canvas是一个可以在上面通过javaScript画图的标签，通过其提供的context（上下文）及Api进行绘制，在这个过程中canvas充当画布的角色。实现电子签名
　　知道几何的朋友都很清楚，线由点绘成，面由线绘成。
　　多点成线，多线成面。
　　所以我们实际只需要拿到当前触摸的坐标点，进行成线处理就可以了。全文大纲vueimg02。bs178。comblxh233f4def5c875875。jpgcanvas一个基于canvas开发，封装于Vue组件的通用手写签名板img02。bs178。comblxh233f4def5c875875。jpgaturePad是一个用于绘制平滑签名的JavaScript库。纯JavaScript实现电子签名，同时支持Web端和移动端。vueimg02。bs178。comblxh233f4def5c875875。jpgcanvas
　　在线预览：https：langyuxiansheng。github。iovueimg02。bs178。comblxh233f4def5c875875。jpgcanvas
　　Github：https：github。comlangyuxianshengvueimg02。bs178。comblxh233f4def5c875875。jpgcanvas
　　vueimg02。bs178。comblxh233f4def5c875875。jpgcanvas一个基于canvas开发，封装于Vue组件的通用手写签名板（电子签名板），支持pc端和移动端，属性支持自定义配置
　　组件模板使用templateh2classtitleVueimg02。bs178。comblxh233f4def5c875875。jpgCanvas电子签名板h2img02。bs178。comblxh233f4def5c875875。jpgcanvasclassimg02。bs178。comblxh233f4def5c875875。jpgcanvasrefimg02。bs178。comblxh233f4def5c875875。jpgCanvas：optionsoptionsvmodelimg02。bs178。comblxh8d6e0baf80249c42。jpgimgvifimg02。bs178。comblxh8d6e0baf80249c42。jpgclassviewimage：srcimg02。bs178。comblxh8d6e0baf80249c42。jpgwidth150height150ulclassulconfigliclasslicspanclassitemlabel书写速度：spanspanclassitemcontentselectnameisimg02。bs178。comblxh233f4def5c875875。jpgvmodeloptions。isimg02。bs178。comblxh233f4def5c875875。jpgoption：img02。bs178。comblxh8d6e0baf80249c42。jpgtrue签名optionoption：img02。bs178。comblxh8d6e0baf80249c42。jpgfalse写字optionselectspanliliclasslicspanclassitemlabel显示边框网格：spanspanclassitemcontentselectnameisimg02。bs178。comblxh233f4def5c875875。jpgvmodeloptions。isShowBorderoption：img02。bs178。comblxh8d6e0baf80249c42。jpgtrue显示optionoption：img02。bs178。comblxh8d6e0baf80249c42。jpgfalse不显示optionselectspanliliclasslicspanclassitemlabel兼容高倍屏高清绘制：spanspanclassitemcontentselectnameisimg02。bs178。comblxh233f4def5c875875。jpgvmodeloptions。isDproption：img02。bs178。comblxh8d6e0baf80249c42。jpgtrue启用optionoption：img02。bs178。comblxh8d6e0baf80249c42。jpgfalse关闭optionselectspanliliclasslicspanclassitemlabel边框宽度：spanspanclassitemcontentinputvmodeloptions。borderWidthtypenumberspanliliclasslicspanclassitemlabel下笔宽度：spanspanclassitemcontentinputvmodeloptions。writeWidthtypenumberspanliliclasslicspanclassitemlabel图片类型：spanspanclassitemcontentinputvmodeloptions。imgTypetypetextspanliliclasslicspanclassitemlabel线条的边缘类型：spanspanclassitemcontentselectnamelineCapvmodeloptions。lineCapoptionimg02。bs178。comblxh8d6e0baf80249c42。jpgbutt平直的边缘optionoptionimg02。bs178。comblxh8d6e0baf80249c42。jpground圆形线帽optionoptionimg02。bs178。comblxh8d6e0baf80249c42。jpgsquare正方形线帽optionselectspanliliclasslicspanclassitemlabel线条交汇时边角的类型：spanspanclassitemcontentselectnamelineCapvmodeloptions。lineJoinoptionimg02。bs178。comblxh8d6e0baf80249c42。jpgbevel创建斜角optionoptionimg02。bs178。comblxh8d6e0baf80249c42。jpground创建圆角optionoptionimg02。bs178。comblxh8d6e0baf80249c42。jpgmiter创建尖角optionselectspanliliclasslicspanclassitemlabel画笔颜色：spanspanclassitemcontentinputtypecolorvmodeloptions。writeColorspanliliclasslicspanclassitemlabel背景色：spanspanclassitemcontentinputtypecolorvmodeloptions。bgColorspanliulspanidclearclickcanvasClear（）清空spanspanidsaveclicksaveAsImg（）保存spanspanidsaveclickdownloadimg02。bs178。comblxh233f4def5c875875。jpgImg（）下载spantemplatestylelangless｛margin：0；padding：0；｝。title｛padding：20textalign：｝。img02。bs178。comblxh233f4def5c875875。jpgcanvas｛display：margin：20｝。viewimage｛display：margin：20｝。config｛width：350margin：20。ulconfig｛。lic｛display：alignitems：padding：4px10。itemlabel｛fontsize：14｝。itemcontent｛marginleft：10｝｝｝｝。img02。bs178。comblxh233f4def5c875875。jpgbtns｛display：justifycontent：clear，clear1，save｛display：padding：5px10width：76height：40lineheight：40border：1background：e1e1e1；borderradius：10textalign：margin：20cursor：｝｝style横屏全屏模式下签名要怎么显示？templatevifimg02。bs178。comblxh233f4def5c875875。jpgimgclassimg02。bs178。comblxh233f4def5c875875。jpgimage：srcimg02。bs178。comblxh233f4def5c875875。jpgaltsrcsettemplatestylelangscssscoped。userimg02。bs178。comblxh233f4def5c875875。jpg｛background：e7e7e7；height：9。375position：。img02。bs178。comblxh233f4def5c875875。jpgimage｛margin：0zindex：9；height：100；transform：rotate（90deg）scale（1。5）；display：｝｝style
　　如下图：
　　img02。bs178。comblxh233f4def5c875875。jpgaturePad
　　在线预览：http：szimek。github。ioimg02。bs178。comblxh233f4def5c875875。jpgaturepad
　　Github：https：github。comszimekimg02。bs178。comblxh233f4def5c875875。jpgaturepad
　　img02。bs178。comblxh233f4def5c875875。jpgaturePad是一个用于绘制平滑签名的JavaScript库。它基于HTML5画布，使用基于Square发布的Smootherimg02。bs178。comblxh233f4def5c875875。jpgatures的可变宽度Bzier曲线插值。它适用于所有现代桌面和移动浏览器，不依赖任何外部库。
　　核心代码：constcanvasdocument。querySelector（canvas）；constimg02。bs178。comblxh233f4def5c875875。jpgaturePadnewimg02。bs178。comblxh233f4def5c875875。jpgaturePad（canvas）；Returnsimg02。bs178。comblxh233f4def5c875875。jpgatureimageasdataURL（seehttps：mdn。iotodataurlforthelistofpossibleparameters）img02。bs178。comblxh233f4def5c875875。jpgaturePad。toDataURL（）；saveimageasPNGimg02。bs178。comblxh233f4def5c875875。jpgaturePad。toDataURL（imagejpeg）；saveimageasJPEGimg02。bs178。comblxh233f4def5c875875。jpgaturePad。toDataURL（imagejpeg，0。5）；saveimageasJPEGwith0。5imagequalityimg02。bs178。comblxh233f4def5c875875。jpgaturePad。toDataURL（imagesvgxml）；saveimageasSVGdataurlReturnsvgstringwithoutconvertingtobase64img02。bs178。comblxh233f4def5c875875。jpgaturePad。toSVG（）；svg。。。svgimg02。bs178。comblxh233f4def5c875875。jpgaturePad。toSVG（｛includeBackgroundColor：true｝）；addbackgroundcolortosvgoutputDrawsimg02。bs178。comblxh233f4def5c875875。jpgatureimagefromdataURL（mostlyuseshttps：mdn。iodrawImageunderthehood）NOTE：Thismethoddoesnotpopulateinternaldatastructurethatrepresentsdrawnimg02。bs178。comblxh233f4def5c875875。jpgature。Thus，afterusingfromDataURL，toDatawontworkproperly。img02。bs178。comblxh233f4def5c875875。jpgaturePad。fromDataURL（data：base64，iVBORw0K。。。）；Drawsimg02。bs178。comblxh233f4def5c875875。jpgatureimagefromdataURLandaltersitwiththegivenoptionsimg02。bs178。comblxh233f4def5c875875。jpgaturePad。fromDataURL（data：base64，iVBORw0K。。。，｛ratio：1，width：400，height：200，xOffset：100，yOffset：50｝）；Returnsimg02。bs178。comblxh233f4def5c875875。jpgatureimageasanarrayofpointgroupsconstdataimg02。bs178。comblxh233f4def5c875875。jpgaturePad。toData（）；Drawsimg02。bs178。comblxh233f4def5c875875。jpgatureimagefromanarrayofpointgroupsimg02。bs178。comblxh233f4def5c875875。jpgaturePad。fromData（data）；Drawsimg02。bs178。comblxh233f4def5c875875。jpgatureimagefromanarrayofpointgroups，withoutclearingyourexistingimage（cleardefaultstotrueifnotprovided）img02。bs178。comblxh233f4def5c875875。jpgaturePad。fromData（data，｛clear：false｝）；Clearsthecanvasimg02。bs178。comblxh233f4def5c875875。jpgaturePad。clear（）；Returnstrueifcanvasisempty，otherwisereturnsfalseimg02。bs178。comblxh233f4def5c875875。jpgaturePad。isEmpty（）；Unbindsalleventhandlersimg02。bs178。comblxh233f4def5c875875。jpgaturePad。off（）；Rebindsalleventhandlersimg02。bs178。comblxh233f4def5c875875。jpgaturePad。on（）；
　　如下图：
　　纯JavaScript实现电子签名
　　完整版：！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1。0titleDocumenttitlestyle｛margin：0；padding：0；｝styleheadbodycanvascanvasbuttononclickcancel（）取消buttonbuttononclicksave（）保存buttonbodyhtml各内核和浏览器支持情况
　　Mozilla程序从Gecko1。8（Firefox1。5（enUS））开始支持。它首先是由Apple引入的，用于OSXDashboard和Safari。InternetExplorer从IE9开始支持，更旧版本的IE中，页面可以通过引入Google的ExplorerCanvas项目中的脚本来获得支持。GoogleChrome和Opera9也支持。小程序中提示
　　在小程序中我们如果需呀实现的话，也是同样的原理哦，只是我们需要将创建实例和上下文的Api进行修改，因为小程序中是没有dom，既然没有dom，哪来的操作dom这个操作呢。如果是uniapp则需要使用uni。createCanvasContext进行上下文创建如果是原生微信小程序则使用wx。createCanvasContext进行创建（2。9。0）之后的库不支持