Vue 实现电子签名并生成签名图片

目录

  1. 前言
  2. 项目结构
  3. 代码实现
  4. 总结
  5. 相关阅读

1. 前言

电子签名在现代Web应用中越来越普遍,例如合同签署、确认表单等。本文将介绍如何使用Vue.js实现一个简单的电子签名功能,并将签名生成图片。

2. 项目结构

项目结构如下:

my-vue-signature/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   └── SignaturePad.vue
│   ├── App.vue
│   ├── main.js
├── package.json
└── README.md

3. 代码实现

3.1 安装依赖

我们将使用一个轻量级的签名画布库 signature_pad,通过npm安装:

如果想学习signature_pad点击链接 - signature_pad 库详解

bash 复制代码
npm install signature_pad

3.2 创建签名画布组件

src/components 文件夹下创建 SignaturePad.vue 文件:

vue 复制代码
<template>
    <div>
      <canvas ref="signatureCanvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="endDrawing" @mouseleave="endDrawing"></canvas>
      <button @click="clearCanvas">清除</button>
      <button @click="saveSignature">保存签名</button>
    </div>
  </template>
  
  <script>
  import SignaturePad from 'signature_pad';
  
  export default {
    name: 'SignaturePad',
    data() {
      return {
        signaturePad: null,
        isDrawing: false,
      };
    },
    mounted() {
      const canvas = this.$refs.signatureCanvas;
      canvas.width = 600;
      canvas.height = 300;
      this.signaturePad = new SignaturePad(canvas);
    },
    methods: {
      startDrawing() {
        this.isDrawing = true;
        this.signaturePad.beginPath();
      },
      draw(event) {
        if (!this.isDrawing) return;
        const rect = this.$refs.signatureCanvas.getBoundingClientRect();
        this.signaturePad.lineTo(event.clientX - rect.left, event.clientY - rect.top);
        this.signaturePad.stroke();
      },
      endDrawing() {
        this.isDrawing = false;
        this.signaturePad.closePath();
      },
      clearCanvas() {
        this.signaturePad.clear();
        this.$emit('clean')
      },
      saveSignature() {
        if (this.signaturePad.isEmpty()) {
          alert('请先签名!');
          return;
        }
        const dataURL = this.signaturePad.toDataURL();
        this.$emit('save-signature', dataURL);
      },
    },
  };
  </script>
  
  <style scoped>
  canvas {
    border: 1px solid #ccc;
    display: block;
    margin-bottom: 10px;
  }
  button {
    margin-right: 10px;
  }
  </style>
  

3.3 在 App.vue 中使用组件并生成签名图片

vue 复制代码
<template>
  <div id="app">
    <div class="center">
    <h1>电子签名</h1>
    <SignaturePad @save-signature="handleSaveSignature" @clean="handleClean" />
    <div >
      <h2>签名图片:</h2>
      <div class="showimg">
        <img v-if="signatureImage" :src="signatureImage"  alt="Signature" />
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import SignaturePad from './components/SignaturePad.vue';

export default {
  name: 'App',
  components: {
    SignaturePad,
  },
  data() {
    return {
      signatureImage: null,
    };
  },
  methods: {
    handleSaveSignature(dataURL) {
      this.signatureImage = dataURL;
    },
    handleClean(){
      this.signatureImage = null
    }
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column
}
.center{

}
.showimg{
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
  width: 610px;
  height: 310px;
}
</style>

4. 总结

通过本文,你学习了如何使用Vue.js和 signature_pad 库实现一个简单的电子签名功能,并生成签名图片。通过这种方式,可以轻松地在Web应用中集成电子签名功能,提高用户体验。

5. 相关阅读


希望本文能帮助你实现电子签名功能。如果有任何问题或建议,请随时联系。祝你开发顺利!

相关推荐
懒大王爱吃狼22 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
秃头佛爷1 小时前
Python学习大纲总结及注意事项
开发语言·python·学习
阿伟*rui1 小时前
配置管理,雪崩问题分析,sentinel的使用
java·spring boot·sentinel
待磨的钝刨1 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
XiaoLeisj3 小时前
【JavaEE初阶 — 多线程】单例模式 & 指令重排序问题
java·开发语言·java-ee
paopaokaka_luck3 小时前
【360】基于springboot的志愿服务管理系统
java·spring boot·后端·spring·毕业设计
dayouziei3 小时前
java的类加载机制的学习
java·学习
励志成为嵌入式工程师4 小时前
c语言简单编程练习9
c语言·开发语言·算法·vim
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
捕鲸叉5 小时前
创建线程时传递参数给线程
开发语言·c++·算法