vue实践：构建高效的电子签名功能

已于 2024-03-12 15:43:45 修改
阅读量6.8k 收藏 66
点赞数 35
分类专栏： vue 文章标签： 前端 vue
于 2024-01-29 09:36:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shids_/article/details/135695601
版权

前言

在现代数字化时代，电子签名成为了一种方便、高效且安全的签署文件的方式。本文将介绍电子签名的原理和实现方法，帮助你快速掌握这一重要的工具。

电子签名是什么？

电子签名是一种数字化的签名方式，用于验证和确认电子文档、合同或其他电子信息的真实性和完整性。它是传统纸质签名的数字化替代品，具有更高的效率、便捷性和安全性。大家看下面这个例子就会一目了然了。

一、手动实现一个简单的电子签名

下面的示例中，我们使用了 Canvas 元素来绘制用户的签名。当用户按下鼠标左键时，startDrawing 方法会被调用，开始绘制路径。当用户移动鼠标时，draw 方法会被调用，绘制路径。当用户释放鼠标左键时，stopDrawing 方法会被调用，停止绘制路径。点击"清除"按钮会清除 Canvas 上的内容，点击"保存"按钮会将签名保存为 Base64 编码的图片数据。

<template>
  <div>
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
    <div>
      <button @click="clearCanvas">清除</button>
      <button @click="saveSignature">保存</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false, // 是否正在绘制
      context: null, // Canvas上下文
    };
  },
  mounted() {
    this.context = this.$refs.canvas.getContext("2d"); // 获取Canvas上下文
    this.$refs.canvas.width = 500; // 设置Canvas的宽度
    this.$refs.canvas.height = 300; // 设置Canvas的高
  },
  methods: {
    // 鼠标按下时触发
    startDrawing(event) {
      this.isDrawing = true; // 开始绘制
      const { offsetX, offsetY } = event; // 获取鼠标相对于Canvas的偏移量
      this.context.beginPath(); // 开始新的路径
      this.context.moveTo(offsetX, offsetY); // 将路径移动到鼠标位置
    },
    // 当鼠标在 Canvas 上移动时触发
    draw(event) {
      if (!this.isDrawing) return; // 如果没有在绘制中，则返回
      const { offsetX, offsetY } = event; // 获取鼠标相对于Canvas的偏移量
      this.context.lineTo(offsetX, offsetY); // 绘制路径
      this.context.stroke(); // 绘制路径的边框
    },
    // 当鼠标松开时触发，用于停止绘制签名
    stopDrawing() {
      this.isDrawing = false; // 停止绘制
    },
    // 清除
    clearCanvas() {
      this.context.clearRect(
        0,
        0,
        this.$refs.canvas.width,
        this.$refs.canvas.height
      ); // 清除Canvas上的内容
    },
    // 保存
    saveSignature() {
      const dataURL = this.$refs.canvas.toDataURL(); // 获取签名图片的Base64编码
      // 在这里可以将dataURL发送到服务器保存，或者进行其他操作
      console.log(dataURL); // 输出签名的Base64编码到控制台
    },
  },
};
</script>
<style scoped>
canvas {
  border: 1px solid red;
}
</style>

实现效果
在这里插入图片描述

二、vue-esign 插件

vue-esign 是一个基于 vue.js 框架的电子签名组件库，它提供了一套现成的 UI 组件，包括签名面板、工具栏等，可以方便地在 vue.js 应用中实现电子签名功能。

2.1 安装

npm install vue-esign --save

2.2 引用

  • 全局引用

    import vueEsign from 'vue-esign'
Vue.use(vueEsign)

  • 局部引用

    import vueEsign from 'vue-esign'
components: { vueEsign }

2.3 使用

<template>
  <div class="box">
    <vue-esign ref="esign" :width="300" :height="150" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor"
      :bgColor.sync="bgColor" />
    <div>
      <button @click="handleReset">清空画板</button>
      <button @click="handleGenerate">生成图片</button>
    </div>
    <img :src="resultImg" alt="">
  </div>
</template>

<script>
import vueEsign from "vue-esign";
export default {
  components: { vueEsign },
  data() {
    return {
      lineWidth: 6,
      lineColor: "#000000",
      bgColor: "",
      resultImg: "",
      isCrop: false,
    };
  },
  mounted() {},
  methods: {
    handleReset() {
      this.$refs.esign.reset();
    },
    handleGenerate() {
      this.$refs.esign
        .generate({ format: "png", quality: 0.8 })
        .then((res) => {
          this.resultImg = res;
        })
        .catch((err) => {
          console.error(err);
          alert("生成图片失败：" + err.message);
        });
    },
  },
};
</script>
<style scoped>
.box {
  width: 300px;
  height: 150px;
  border: 1px solid red;
}
</style>

实现效果

在这里插入图片描述

此外，vue-esign 插件还支持画笔粗细自定义、画笔颜色自定义等等，感兴趣的同学可以看下面的属性试试。

2.4 常用的属性

属性类型默认值描述
widthNumber800画布宽度，即导出图片的宽度
heightNumber300画布高度，即导出图片的高度
lineWidthNumber4画笔粗细
lineColorString#000000画笔颜色
bgColorString空画布背景色，为空时画布背景透明，支持多种格式 ‘#ccc’，‘#E5A1A1’，‘rgb(229, 161, 161)’，‘rgba(0,0,0,.6)’，‘red’
isCropBooleanfalse是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
isClearBgColorBooleantrue清空画布时(reset)是否同时清空设置的背景色(bgColor)
formatStringimage/png生成图片格式 image/jpeg(jpg格式下生成的图片透明背景会变黑色请慎用或指定背景色)、 image/webp
qualityNumber1生成图片质量；在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

三、vue-signature-pad 插件

vue-signature-pad 同样是一个基于 vue.js 框架的电子签名组件库，它提供了一个可定制的签名面板，可以方便地在 vue.js 应用中实现电子签名功能。

注意： 如果仍在使用 vue2 ，请安装 2.0.5 版本，对于 vue3，可以安装最新的发布版本。

3.1 安装

npm i vue-signature-pad@2.0.5

3.2 全局引用

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

3.3 使用

<template>
  <div class="box">
    <VueSignaturePad width="300px" height="150px" ref="signaturePad" />
    <div>
      <button @click="save">保存</button>
      <button @click="undo">撤销</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    // 撤销操作
    undo() {
      this.$refs.signaturePad.undoSignature();
    },
    // 保存操作
    save() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
      console.log(data);
    },
  },
};
</script>
<style scoped>
.box {
  width: 300px;
  height: 150px;
  border: 1px solid red;
}
</style>

实现效果

在这里插入图片描述

3.4 常用的属性

属性类型默认值描述
widthString100%画布宽度
heightString100%画布高度
optionsObject{}设置画笔的选项，包括线条颜色、宽度、透明度等
imagesArray[]设置背景图片。可以是 [‘1.png’, ‘2.png’] 或者 [{ src: ‘1.png’, x: 0, y: 0 }, { src: ‘2.png’, x: 0, y: 10 }]
customStyleObject{}设置画布的自定义样式。可以是一个CSS样式对象
scaleToDevicePixelRatioBooleantrue设置是否将画布缩放到设备像素比

3.5 常用的方法

方法参数描述
saveSignature(type, encoderOptions)(String, Number)保存当前的签名，并返回一个包含签名是否为空和签名数据的对象
undoSignature()-撤销上一步的签名操作
clearSignature()-清除当前的签名
mergeImageAndSignature(signature)Object 或者 String将指定的背景图片与当前的签名合并
addImages(images)Array添加多个背景图片
lockSignaturePad()-锁定签名画布，禁止用户进行签名操作
openSignaturePad()-解锁签名画布，允许用户进行签名操作
getPropImagesAndCacheImages()-获取图像的信息
clearCacheImages()-清除缓存的图片
fromDataURL(data, options, callback)(String, Object, Callback)从指定的DataURL加载签名数据
fromData(data)String从指定的数据加载签名数据
toData()-获取当前的签名数据
isEmpty()-检查当前的签名是否为空

完整功能代码

<template>
  <div class="box">
    <!-- VueSignaturePad 组件 -->
    <VueSignaturePad :width="width" :height="height" :options="options" :images="images" :customStyle="customStyle"
      :scaleToDevicePixelRatio="scaleToDevicePixelRatio" ref="signaturePad" />
    <div>
      <!-- 操作按钮 -->
      <button @click="save">保存</button>
      <button @click="undo">撤销</button>
      <button @click="clear">清除</button>
      <button @click="mergeImage">合并图片</button>
      <button @click="addImages">添加图片</button>
      <button @click="lock">锁定</button>
      <button @click="unlock">解锁</button>
      <button @click="getData">获取数据</button>
      <button @click="isEmpty">是否为空</button>
      <button @click="getPropImagesAndCacheImages">获取并缓存背景图片</button>
      <button @click="clearCacheImages">清除缓存的背景图片</button>
      <button @click="loadSignatureFromDataURL">从 Data URL 加载签名</button>
      <button @click="loadSignatureFromData">从 JSON 数据加载签名</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: "1000px",
      height: "500px",
      options: {
        minWidth: 2, // 画笔最小宽度
        maxWidth: 5, // 画笔最大宽度
        throttle: 16, // 画笔移动事件的时间间隔，单位为毫秒
        minDistance: 5, // 画笔移动的最小距离，单位为像素
        backgroundColor: "rgba(255, 255, 255, 0)", // 画布背景颜色
        penColor: "red", // 画笔颜色
        velocityFilterWeight: 0.7, // 画笔速度过滤器的权重
        onBegin: () => {}, // 开始签名时的回调函数
        onEnd: () => {}, // 结束签名时的回调函数
      },
      images: [],
      customStyle: {
        signatureCanvas: {
          border: "1px solid #ccc", // 画布边框
          borderRadius: "5px", // 画布圆角
        },
        signaturePad: {
          boxShadow: "0 0 5px rgba(0, 0, 0, 0.1)", // 画笔阴影
        },
      },
      scaleToDevicePixelRatio: true,
    };
  },
  methods: {
    // 保存签名
    save() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
      console.log("签名是否为空:", isEmpty);
      console.log("签名数据:", data);
    },
    // 撤销签名
    undo() {
      this.$refs.signaturePad.undoSignature();
    },
    // 清除签名
    clear() {
      this.$refs.signaturePad.clearSignature();
    },
    // 合并图片和签名
    mergeImage() {
      const image = "image.jpg"; // 替换为你的背景图片路径
      this.$refs.signaturePad.mergeImageAndSignature(image);
    },
    // 添加图片
    addImages() {
      const images = ["image.jpg", "image.jpg"]; // 替换为你的背景图片路径数组
      this.$refs.signaturePad.addImages(images);
    },
    // 锁定签名画布
    lock() {
      this.$refs.signaturePad.lockSignaturePad();
    },
    // 解锁签名画布
    unlock() {
      this.$refs.signaturePad.openSignaturePad();
    },
    // 获取签名数据
    getData() {
      const data = this.$refs.signaturePad.toData();
      console.log("获取签名数据:", data);
    },
    // 检查签名是否为空
    isEmpty() {
      const empty = this.$refs.signaturePad.isEmpty();
      if (!empty) {
        alert("画布不为空！");
      } else {
        alert("画布为空！");
      }
    },
    // 获取并缓存背景图片
    getPropImagesAndCacheImages() {
      const images = ["image1.jpg", "image2.jpg"]; // 替换为你的背景图片路径数组
      this.$refs.signaturePad.getPropImagesAndCacheImages(images);
    },
    // 清除缓存的背景图片
    clearCacheImages() {
      this.$refs.signaturePad.clearCacheImages();
    },
    // 从 Data URL 加载签名
    loadSignatureFromDataURL() {
      const dataURL = "data:image/png;base64,iVBORw0KG..."; // 替换为你的 Data URL
      this.$refs.signaturePad.fromDataURL(dataURL);
    },
    // 从 JSON 数据加载签名
    loadSignatureFromData() {
      const signatureData = {
        width: 500,
        height: 500,
        data: [
          {
            color: "#000",
            points: [
              { x: 100, y: 100 },
              { x: 200, y: 200 },
              { x: 300, y: 300 },
            ],
          },
          {
            color: "#f00",
            points: [
              { x: 400, y: 400 },
              { x: 450, y: 450 },
              { x: 500, y: 500 },
            ],
          },
        ], //替换你的数据
      };
      const pointGroups = signatureData.data;
      this.$refs.signaturePad.fromData(pointGroups);
    },
  },
};
</script>
<style scoped>
.box {
  width: 1000px;
  height: 500px;
  border: 1px solid red;
}
</style>

四、vue-esign 和 vue-signature-pad 的区别？

4.1 共同点

  • 兼容 PC 和 移动端；
  • 同时支持 vue2 和 vue3;
  • 画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标）；
  • 自定义画布尺寸，画笔粗细、颜色，画布背景色。

4.2 不同点

  • vue-signature-pad 带笔压功能，可以根据笔的速度和方向来调整线条的粗细，不是固定粗细的，vue-esign 不支持此功能；
  • vue-signature-pad 的 vue2 和 vue3 依赖安装版本不同；vue-esign 都版本向下兼容，不需要区分 vue2 和 vue3;
  • vue-signature-pad 支持单步撤回，vue-esign 不支持此功能。

笔压对比效果

左边是 vue-signature-pad 插件，可以看到画笔线条不是固定粗细的，右边是 vue-esign 插件，线条是固定的粗细。
在这里插入图片描述

相关推荐

⭐ 浅谈 JSON 对象和 FormData 相互转换，打通前端与后端的通信血脉

水星记_
关注
专栏目录
在Vue项目中实现签名
weixin_45634433的博客
07-19 2387
经常在银行的业务或者是电子合同的签署是会有签名的场景,就想看一下怎么实现,但是自己对于canvas并不是熟悉的,在这里记录一下这个写法 代码配置 <template> <!-- 手写签名组件 --> <div class="page sign-page"> <div class="content"> <div class="sign-wrap" id="signWrap"> <canvas id.
uniapp 电子签名 包含 返回 撤回 颜色 线条等功能
10-18
在IT行业中，尤其是在移动应用开发领域，...通过以上步骤，我们就能在uniAPP中构建一个功能完备的电子签名组件，提供丰富的用户体验，并满足各种业务需求。在实践中，不断优化和迭代，可以使这个组件更加稳定和高效。
vue 使用 canvas 实现手写电子签名
11-20
功能 兼容 PC 和 Mobile； 画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标偏移）； 自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色； 支持裁剪 （针对需求：有的签字需要裁剪掉四周空白）。 导出图片格式为 base64 ； 示例demo 安装 npm install vue-esign --save 使用 main.js 中引入 import vueEsign from 'vue-esign' Vue.use(vueEsign) 页面中使用 必须设置 ref ，用来调用组件的两个内置方法 reset() 和 generate
vue-signature-pad:ature签名板组件视图
04-28
Vue签名板 Vue组件包装，用于 演示版 安装 $ yarn add vue-signature-pad 用法 import Vue from 'vue' ; import VueSignaturePad from 'vue-signature-pad' ; Vue . use ( VueSignaturePad ) ; < template> < div xss=removed> < VueSignaturePad xss=removed xss=removed xss=removed> < div> < button @ click = " save " >Save</ button > < button @ click = " undo " >Undo</ button >
Vue Signature Pad 安装和配置指南
最新发布
gitblog_09200的博客
09-13 514
Vue Signature Pad 安装和配置指南 vue-signature-pad ???? Vue Signature Pad Component 项目地址: https://gitcode.com/gh_mirrors/vu/v...
使用 Vue.js 实现一个电子签名系统
gygkhd的博客
06-14 1368
本文介绍了如何使用 Vue.js 和插件创建一个简单的电子签名系统。通过这个示例，你可以了解到 Vue.js 在处理用户交互和数据绑定方面的强大功能。希望这个示例能为你实现更复杂的电子签名功能提供一个良好的起点。
Vue 实现电子签名
weixin_52046784的博客
11-09 5214
我使用的是vue-cli2 1.下载插件： npm install vue-esign --save 2.全局引入： //main.js中引入： import vueEsign from ‘vue-esign’ Vue.use(vueEsign) 3.示例代码： 这是电子签名组件 1.定义数据和清空、生成事件回调 2.模板中使用组件,并属性传值 3.上传到oss并返回访问路径在模板中显示 请在下方书写电子签名 4.文件格式： 默认canvas会生成base64格式的图片
Vue 实现电子签名并生成签名图片
gz_qiulinyong的博客
07-23 1757
前端性能优化是提升用户体验、增加用户留存和提升SEO排名的重要环节。本文将列举出多种提升前端性能的方法，帮助开发者构建更快速、流畅的Web应用。前端性能优化是一个系统性的工作，涉及资源优化、缓存管理、代码优化、网络优化等多个方面。通过合理地应用这些方法，可以显著提升Web应用的加载速度和用户体验。
VUE实现电子签名
m0_46114541的博客
02-22 679
在vue中通过vanvas实现电子签名功能
电子签名功能 vue
GYHHelloWold的博客
06-24 574
@mousedown=“mouseDown” @mousemove=“mouseMove” @mouseup=“mouseUp” 为pc端需求 @touchstart=“touchStart” @touchmove=“touchMove” @touchend=“touchEnd” 为移动端需求 将canvas转换成base64位编码格式的图片，压缩图片后，可将值进行异步请求 <template&gt
uniapp Vue3前端源码：电子合同小程序一站式解决方案
- 安全性：作为处理电子合同的工具，安全性是其核心考虑因素之一，应保证用户数据的加密存储和传输，以及电子签名的真实性和合法性。 5. 使用场景： - 在线签署：用户可以在任何时间、任何地点通过小程序完成合同...
vue-signature-simple-master.zip
02-25
结合标签“vue signature”和“电子签名”，我们可以推断这个项目是一个Vue组件，用于实现电子签名功能。用户可以通过触摸或鼠标在画布上绘制签名，然后将签名数据保存或展示。Vue.js的灵活性和组件化结构使得创建...
vue中实现电子签名
baidu_38766085的博客
09-06 2207
在vue-cli中使用该插件 我们先安装组件 npm i elesigncode 首先下载版本大于1.0.9的版本 下载好版本过后我们来创建一个组件 在组件中使用的详细流程 <template> <div> <div> 在vue-cli中使用elesigncode </div> <div class="hello" > <ElesignCode ref="signCod
vue 实现电子签名（关于vue-esign插件的使用）
泪耳的博客
12-27 2174
在写一个校园类的系统时，有需求使用电子签名的功能，参考了很多不错的案例（文章后面有分享），所以就有了以下文章。 用于自用的笔记记录，写的可能有些乱，希望能帮到你。
Vue-电子签名(E-Signature)
热门推荐
苏宛墨的博客
04-07 1万+
业务场景 用户在页面使用电子签名进行文件的签收与信息的确认 分析 考虑用户会通过手机或者PC端进行操作，因此需要在事件中考虑手机端部分 思路 通过一个对话框的形式利用Canvas生成图片并通过toDataURL()转换成Base64的形式保存下来提交给后端进行保存 最终效果 实际效果展示 实现 详情请看：Vue-电子签名(E-Signature) ...
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1902
本文介绍了电子签名、图片合成、及预览功能
vue签名组件-移动
06-13
此组件为单独组件，通过components引入即可使用，根据项目需求自行配置编写样式
基于ssm+vue在线房屋租赁和电子签约系统.zip
03-28
总的来说，基于SSM+Vue的在线房屋租赁和电子签约系统是一个集成了多项技术的复杂项目，涉及到后端开发、前端交互、数据库管理、电子签名、支付接口等多个方面。开发这样的系统，需要深入理解各项技术并具备良好的...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水星记_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值