vue中使用vue-signature-pad实现电子签名的效果

vue中使用vue-signature-pad实现电子签名的效果

最近项目中需要做一个电子签名的控件，踩坑不少。现记录一下。

一、控件效果

这是一个之前的项目中的手写签名的一个控件，现在要改成vue版本的。

二、插件选择

之前因为没有接触过手写签名的功能，所以就去上 ​​ github ​​ 上面搜相关的代码，然后把代码-下来，一个个的安装 node_modules 文件夹，查看代码效果。但是插件要不就是缺少撤销功能，要不就是没有调节画笔的粗细功能。最后筛选出来的一些主要的代码网址如下：

1、带撤销效果，保存功能为在控制台打印出图片信息，可调节画笔粗细2、锁定，撤销，清除，线条颜色、粗细，背景色

最后经过筛选，确定用 vue-signature-pad 插件进行开发。网址2用的是 vue-drawing-canvas 插件，放出来这个网址主要是参考了里面的手写签名的回显功能。

github 上对于插件 vue-signature-pad 的介绍和 npm 官网上（​​github 和 npm 官网都可以。

三、开发过程记录

1、如果项目中用的是 vue2 的版本，那么安装 2.0.5版本：

npm install --save vue-signature-pad@2.0.5

如果项目中用的是 vue3 版本，那么安装最新的版本即可：

npm install --save vue-signature-pad

2、 main.js 中引用 vue-signature-pad ：

import Vue from 'vue'import VueSignaturePad from "vue-signature-pad";Vue.use(VueSignaturePad);

3、完整的 vue 代码如下：

最后的效果：

代码注解：

①

img 标签加一个 v-if 的判断条件，不然没有图片的时候，会显示一个加载失败的图片，如下图：

② 调节画笔的粗细是根据 options 属性里面的 minWidth 和 maxWidth 来设置的。因为 vue-signature-pad 插件会根据用户签名时候操作鼠标的速度不同，画笔的线条粗线不一样，所以我设置的时候，把 minWidth 和 maxWidth 都设置为同样的值，来保证画笔的粗细一致。这里注意调节画笔粗细的时候，在方法 selSize 中不能直接设置 this.options.minWidth 的值，要对整体的 this.options 设置才能起效果（此处参考了文章： ​​vue-signature-pad在vue中实现电子签名效果​​ ）。

项目到这里基本就结束了，目前还没有橡皮擦的功能，暂时没有添加，个人感觉橡皮擦功能用处不大。后续如果添加了，会续更文章（可参考 ​​vue手写签名组件_Vue签名板组件​​）。

vue-signature-pad 插件中的 options 属性在 github 和 npm 官网中都没有详细的解释，关于 options 中的详细属性可参考 ​​分割线  --------------------------

这里记录一下关于签名回显的一个踩坑记录。

最终是参考了  ​​img 标签回显的。

一开始随意上网搜的时候看到 这里面有介绍回显的方法，是通过插件 vue-signature-pad 的 fromData 方法回显的。

但是这样就造就了一个问题：

我们在弹框里面手写签名的地方一般都比较大，回显的区域比较小，所以就造成了回显的时候，签名有往下偏离，造成显示不全的情况。如下图：

这种方法的实现过程的代码如下：

1、定义回显的标签：

2、data 中定义 signData ，用来存储插件内置方法 toData() 返回的数据。

data(){ return { signData:null }},

3、js 有关代码处理

save(){ const { isEmpty, data } = this.$refs.signaturePad.saveSignature(); console.log(isEmpty); console.log(data); this.panelVisible = false; this.signData=this.$refs.signaturePad.toData(); console.log(this.signData) this.$refs.signaturePadShow.fromData(this.signData);},

通过在控制台打印 this.signData 可以看出来端倪：

通过控制台的数据，可以看出来最主要的是 x、y轴的坐标值。因为插件底层是通过 canvas 绘制的，我们签名的时候，canvas 画布比较大，回显的时候画布比较小，而我们的 this.signData 数据是签名的时候的数据，所以就造成了回显的时候图片往下偏离的情况。

解决办法就是等比例的缩小 this.signData 数据中的 x 和 y 的值。

例如我们签名的时候，签名区域的 canvas 元素的高度为 300px，回显区域的 canvas 元素的高度为 150px，那么我们就应该把 this.signData 数据中的 x、y值等比例的缩小，缩小的比例为 (300-150)/300 = 50% ，即缩减比例为 0.5，所以代码更改为：

save(){ const { isEmpty, data } = this.$refs.signaturePad.saveSignature(); console.log(isEmpty); console.log(data); this.panelVisible = false; this.signData=this.$refs.signaturePad.toData(); console.log(this.signData) if(this.signData && this.signData.length>0){ this.signData.map(val=>{ val.points.map(list=>{ list.x = list.x*0.5 list.y = list.y*0.5 }) }) } this.$refs.signaturePadShow.fromData(this.signData);},

至此，签名的回显就没有问题了。

但是不建议用插件 vue-signature-pad 中的内置方法 fromData() 回显我们的签名，因为我们终究要把签名的图片数据存储到后端，回显的时候通过接口获取签名的图片相关数据进行回显。所以我们最后保存的时候给后端传递的数据为 saveSignature() 方法中返回的 data 属性值，data为通过 base64 编码的图片信息，获取的时候也是获取相关的图片信息，然后通过设置 img 标签的 src 属性值进行回显。

完结！撒花~~~

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。