H5移动端项目实现手写签名功能 vue实现手写签名

最新推荐文章于 2024-10-05 10:34:25 发布

牵手相守

最新推荐文章于 2024-10-05 10:34:25 发布

阅读量2.4k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yangli_/article/details/127754090

版权

本文介绍了如何在Vue移动端项目中实现手写签名功能，并详细说明了保存签名时如何将其转换为base64格式。同时，提供了将base64转换为file文件格式的方法。这个功能适用于移动端，不适用于PC端，代码可供封装成组件使用，只需调整CSS样式以适应需求。

摘要由CSDN通过智能技术生成

在这里插入图片描述
vue 移动端实现手写签名效果，功能很完美，保存时保存为base64格式。
base64转file文件格式 vue中将base64转file文件格式

下面代码可自行封装组件（只支持移动端，不支持pc端）。

代码中，css自行修改一下宽高，背景之类即可。

代码如下

<template>
  <!-- 手写签名组件 -->
  <div class="page sign-page">
    <div class="content">
      <div class="sign-wrap" id="signWrap">
        <canvas id="myCanvas" width="100%" height="100%"></canvas>
      </div>
    </div>
    <div class="con-btn">
      <span class="staging-btn size14" @click="clearArea()">清除签名</span>
      <span class="submit-btn size14" @click="saveSign()">确认签名</span>
    </div>
  </div>
</template>

<script>
export default {
   
  name: "signature",
  data() {
   
    return {
   
      image: "",
      mousePressed: false,
      c: "",
      ctx: "",
      lastX: 0,
      lastY: 0,
    };
  }<