使用vue3.0实现一个移动端电子签名组件

已于 2023-05-09 14:47:45 修改
阅读量2.3k 收藏 15
点赞数 3
分类专栏： vue 自定义效果插件
于 2021-11-29 11:11:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39207066/article/details/121604885
版权

canvas 移动端 签名组件 touch事件 图像数据
关键词由CSDN通过智能技术生成

因业务需求，前段时间写了一个电子签名组件，在这里记录一下，绘图需求，首先肯定需要使用

canvas标签，考虑到在移动端使用，所以选择使用touch事件。

首先奉上html结构（该组件为横屏展示）：

<div class="signName" :style="{top:0,left:differ+'px'}">
    <div class="close" @click="close"><img src="../assets/images/close.png" alt=""></div>
   <div class="autographBox">
      <div ref="canvasHW">
       <canvas
        @touchstart="touchStart($event)"
        @touchmove="touchMove($event)"
        @touchend="touchEnd($event)"
        ref="canvasF"
      ></canvas>
      </div>
      <p v-if="!isDraw">请本人签名</p>
   </div>
    <div class="autographBtn">
      <div @click="overwrite">重签</div>
      <div @click="seaveImages">确定</div>
    </div>
  </div>

css样式:

.signName{
  position: fixed;
  height: 100vw;
  width: 100vh;
  background-color: #fff;
  transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  transform-origin: left top;
  z-index: 1000;
  /* top:0;
  left: 0; */
}
.close{
  width: 100%;
  height: 10%;
  padding-left: 2.5rem;
  padding-top: 1.2rem;
}
.close img{
  width: 2rem;
}
 .autographBox{
  width: 100%;
  height: 80%;
  position: relative;
} 
.autographBox div{
  width: 100%;
  height: 100%;
}
.autographBox canvas{
  width: 100%;
  height: 100%;
}
.signName p{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 4rem;
  font-weight: bolder;
  color:#436CDF;
  opacity: 0.1;
} 
.autographBtn{
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.autographBtn div{
  width: 50%;
  height: 100%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
}
.autographBtn div:first-child{
  opacity: 0.4;
  background:  -webkit-linear-gradient(top, #728CFD 0%,#5C7EFE 100%);
}
.autographBtn div:last-child{
  background:  -webkit-linear-gradient(top, #728CFD 0%,#5C7EFE 100%);
}

其次定义变量，初始化canvas:

   var differ = ref(document.documentElement.clientWidth)
   var canvasF = ref(null);
   var canvasHW = ref(null);
   var canvasTxt = null; //画布
   var points = []; // 记录点
   var isDraw = ref(false); //签名标记
   var startX = 0; //开始坐标x
   var startY = 0;//开始坐标y
   var moveY= 0;
   var moveX= 0;
   var strDataURI ='' // 保存的canvas图像
    onMounted(() =>{
      let canvas =canvasF.value;
      canvas.height = canvasHW.value.offsetHeight - 10;
      canvas.width = canvasHW.value.offsetWidth - 10;
      canvasTxt = canvas.getContext("2d");
      canvasTxt.strokeStyle = '#333';
      canvasTxt.lineWidth = '3';
    })

主要事件方法如下：

  1. touchstart

    const touchStart = (ev) => {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        isDraw.value = true; //签名标记
        let obj = {
          x: ev.targetTouches[0].clientY,
          y: differ.value- ev.targetTouches[0].clientX - (differ.value*0.1)
        }; //y的计算值中：document.body.offsetHeight*0.5代表的是除了整个画板signatureBox剩余的高，this.$refs.canvasHW.offsetHeight*0.1是画板中标题的高
        startX = obj.x;
        startY = obj.y;
        canvasTxt.beginPath();//开始作画
        points.push(obj);//记录点
      }
    }

  2. touchmove

    const touchMove = (ev)=> {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientY,
          y: differ.value- ev.targetTouches[0].clientX - (differ.value*0.1)
        };
        moveY = obj.y;
        moveX = obj.x;
        canvasTxt.moveTo(startX, startY);//移动画笔
        canvasTxt.lineTo(obj.x, obj.y);//创建线条
        canvasTxt.stroke();//画线
        startY = obj.y;
        startX = obj.x;
        points.push(obj);//记录点
      }
    }

  3. touchend

    const touchEnd = (ev)=> {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientY,
          y: differ.value- ev.targetTouches[0].clientX - (differ.value*0.1)
        };
        points.push(obj);//记录点
        points.push({ x: -1, y: -1 });//记录点
        canvasTxt.closePath();//收笔
        canvasTxt.fill();
      }
    }

  4. 重写

    const overwrite = ()=> {
      canvasTxt.clearRect(
        0,
        0,
        canvasF.value.width,
        canvasF.value.height
      );
      points = [];
      isDraw.value = false; //签名标记
    }

  5. 保存图片

    function seaveImages() {
    if(isDraw.value){
       strDataURI = canvasF.value.toDataURL("image/png");
       console.log(strDataURI)
       cxt.emit("autographConfirm", {
        baseCode:strDataURI,
      });
    }else{
      console.log(Toast);
      Toast('您还没有签名')
    }
  }

最后附上完整代码:

<template>
  <div class="signName" :style="{top:0,left:differ+'px'}">
    <div class="close" @click="close"><img src="../assets/images/close.png" alt=""></div>
   <div class="autographBox">
      <div ref="canvasHW">
       <canvas
        @touchstart="touchStart($event)"
        @touchmove="touchMove($event)"
        @touchend="touchEnd($event)"
        ref="canvasF"
      ></canvas>
      </div>
      <p v-if="!isDraw">请本人签名</p>
   </div>
    <div class="autographBtn">
      <div @click="overwrite">重签</div>
      <div @click="seaveImages">确定</div>
    </div>
  </div>
</template>
<script>
import { ref, onMounted } from "vue";
import { Toast } from "vant";
export default {
  name: "index",
  setup(props,cxt) {
    var differ = ref(document.documentElement.clientWidth)
   var canvasF = ref(null);
   var canvasHW = ref(null);
   var canvasTxt = null; //画布
   var points = []; // 记录点
   var isDraw = ref(false); //签名标记
   var startX = 0; //开始坐标x
   var startY = 0;//开始坐标y
   var moveY= 0;
   var moveX= 0;
   var strDataURI ='' // 保存的canvas图像
    onMounted(() =>{
      let canvas =canvasF.value;
      canvas.height = canvasHW.value.offsetHeight - 10;
      canvas.width = canvasHW.value.offsetWidth - 10;
      canvasTxt = canvas.getContext("2d");
      canvasTxt.strokeStyle = '#333';
      canvasTxt.lineWidth = '3';
    }) 
    const touchStart = (ev) => {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        isDraw.value = true; //签名标记
        let obj = {
          x: ev.targetTouches[0].clientY,
          y: differ.value- ev.targetTouches[0].clientX - (differ.value*0.1)
        }; //y的计算值中：document.body.offsetHeight*0.5代表的是除了整个画板signatureBox剩余的高，this.$refs.canvasHW.offsetHeight*0.1是画板中标题的高
        startX = obj.x;
        startY = obj.y;
        canvasTxt.beginPath();//开始作画
        points.push(obj);//记录点
      }
    }
   const touchMove = (ev)=> {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientY,
          y: differ.value- ev.targetTouches[0].clientX - (differ.value*0.1)
        };
        moveY = obj.y;
        moveX = obj.x;
        canvasTxt.moveTo(startX, startY);//移动画笔
        canvasTxt.lineTo(obj.x, obj.y);//创建线条
        canvasTxt.stroke();//画线
        startY = obj.y;
        startX = obj.x;
        points.push(obj);//记录点
      }
    }
    const touchEnd = (ev)=> {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientY,
          y: differ.value- ev.targetTouches[0].clientX - (differ.value*0.1)
        };
        points.push(obj);//记录点
        points.push({ x: -1, y: -1 });//记录点
        canvasTxt.closePath();//收笔
        canvasTxt.fill();
      }
    }
    const overwrite = ()=> {
      canvasTxt.clearRect(
        0,
        0,
        canvasF.value.width,
        canvasF.value.height
      );
      points = [];
      isDraw.value = false; //签名标记
    }
  function seaveImages() {
    if(isDraw.value){
       strDataURI = canvasF.value.toDataURL("image/png");
       console.log(strDataURI)
       cxt.emit("autographConfirm", {
        baseCode:strDataURI,
      });
    }else{
      console.log(Toast);
      Toast('您还没有签名')
    }
  }
  function close(){
    cxt.emit("close", {
      closeFlag:false,
    });
  }
    return {
      differ,
      canvasF,
      canvasHW,
      isDraw,
      touchStart,
      touchMove,
      touchEnd,
      overwrite,
      seaveImages,
      close
    };
  },
};
</script>
<style scoped>
.signName{
  position: fixed;
  height: 100vw;
  width: 100vh;
  background-color: #fff;
  transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  transform-origin: left top;
  z-index: 1000;
  /* top:0;
  left: 0; */
}
.close{
  width: 100%;
  height: 10%;
  padding-left: 2.5rem;
  padding-top: 1.2rem;
}
.close img{
  width: 2rem;
}
 .autographBox{
  width: 100%;
  height: 80%;
  position: relative;
} 
.autographBox div{
  width: 100%;
  height: 100%;
}
.autographBox canvas{
  width: 100%;
  height: 100%;
}
.signName p{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 4rem;
  font-weight: bolder;
  color:#436CDF;
  opacity: 0.1;
} 
.autographBtn{
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.autographBtn div{
  width: 50%;
  height: 100%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
}
.autographBtn div:first-child{
  opacity: 0.4;
  background:  -webkit-linear-gradient(top, #728CFD 0%,#5C7EFE 100%);
}
.autographBtn div:last-child{
  background:  -webkit-linear-gradient(top, #728CFD 0%,#5C7EFE 100%);
}
</style>

捕风的紫色鸢尾
关注
  • 3
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用vue实现一个电子签名组件的示例代码
10-15
在本文中，我们将探讨如何使用 Vue.js 实现一个电子签名组件。这个组件允许用户在屏幕上绘制签名，通常用于线上文档签署等场景。 首先，我们要知道实现电子签名的核心是HTML5的 `<canvas>` 标签。`<canvas>` 提供了...
vue使用canvas实现移动端手写签名
10-14
<img v-bind:src="url" alt="vue使用canvas实现移动端手写签名"> 重写 保存签名 ``` 2. **Vue组件**： 在Vue组件中，我们需要定义一个名为`Draw`的类来处理Canvas上的绘制逻辑。这个类将包含用于开始、结束和绘制...
vue移动端手写电子签名的实现方式
02-07 3356
最近项目组要求做一个移动端手写签名的组件 一共找了两种方案，一种不需要安装插件，一种是安装vueEsign插件
vue3实现电子签名的方法
Handsome_gir的博客
05-08 654
vue3实现电子签名且对电子签名可进行修改画笔粗细、画笔颜色、撤销、清屏、保存等功能。
Vue3实现在线签名
最新发布
求知、探索、分享
06-07 958
canvas实现在线签名
移动端VUE-H5手写电子签名的实现（生成base64图片）- 横版
zhaotian2017的博客
09-21 1478
实现形式：html页面中引入vue方式。
VUE签字组件
一步一个脚印，踏实努力，向着目标前进
07-12 2645
这个组件包含一个 canvas 元素用于绘制签字，以及两个按钮用于清除画布和保存签字。通过监听鼠标事件，在鼠标按下时开始绘制，鼠标移动时继续绘制，鼠标松开时停止绘制。绘制过程中，使用开始新的路径，使用和绘制线段，使用进行绘制。清除画布可以使用方法清除画布上的内容。保存签字可以使用方法将画布内容转换为图片数据，可以将这个数据发送到后端保存或展示。在使用这个组件时，可以将其引入到 Vue 的组件中，并在需要的地方使用标签进行调用。
vue实践：构建高效的电子签名功能
Shids_的博客
01-29 4730
vue实践：构建高效的电子签名功能
vue 电子签名插件
grow_的博客
06-08 582
3.调用组件的两个内置方法 reset() 和 generate()2.main.js全局引入。
vue移动端电子签名
zzll1216的博客
06-07 405
vue实现移动端电子签名 sign-canvas
vue+canvas实现移动端手写签名
10-15
在本文中，我们将探讨如何使用Vue.js和HTML5的Canvas元素来实现移动端的手写签名功能。Vue.js是一个流行的JavaScript框架，用于构建用户界面，而Canvas则是一个HTML5元素，允许我们进行图形绘制。 首先，我们需要...
vue签名组件-移动
06-13
此组件为单独组件，通过components引入即可使用，根据项目需求自行配置编写样式
手写签名插件（PC端和移动端可用）
12-20
jQuery手写签名插件jSignature，jSignature是一个jQuery插件，它简化了创建签名捕获场的浏览器窗口，允许用户使用鼠标，笔，或手指画一个签名。jSignature捕捉签名矢量轮廓的笔触。虽然jSignature可以导出大位图（PNG）也一样，提取签名的高度可扩展的行程运动坐标（又名向量图）允许签名呈现更大的灵活性。支持主要的台式机，平板电脑和手机浏览器的支持。HTML5 Canvas元素默认情况下使用。我们依傍基于Flash的Canvas元素模拟器（FlashCanvas）时，不支持浏览器的实际画布（ie8 以下）
HTML签字加时间水印(支持移动端)-jSignature-扩展
11-14
HTML签字加时间水印(支持移动端)-jSignature-扩展。根据jSignature官方demo，制作自己的带水印签字图片，图片格式只用了base64，喜欢的朋友可以自己改全格式的图片，欢迎大家指导
配置一个vue3.0项目的完整步骤
11-28
以上就是配置一个 Vue 3.0 项目的完整步骤，通过这个过程，你可以理解 Vue 3.0 项目的构建基础，以及如何结合其他技术栈实现一个完整的前端应用。记得在实际开发中，根据项目需求灵活调整和扩展。
vue 实现电子签名（关于vue-esign插件的使用）
耳火的博客
12-27 1874
在写一个校园类的系统时，有需求使用电子签名的功能，参考了很多不错的案例（文章后面有分享），所以就有了以下文章。 用于自用的笔记记录，写的可能有些乱，希望能帮到你。
vue3 实现电子签名
m0_74359467的博客
04-14 311
【代码】vue3 实现电子签名。
使用vue-sign插件
m0_74265396的博客
10-17 794
Vue-sign是一个基于Vue.js和Canvas的签名组件，可以轻松地在Vue应用程序中实现签名板或手写签名功能。使用它可以使用户在前端网页上直接进行手写签名，实现更好的用户交互和业务需求。通过以上步骤，您将能够在Vue.js应用程序中使用Vue-sign组件来创建电子签名和签名板。通过Vue.js框架进行开发，易于集成到Vue应用程序中；提供签名图片的导出、清空、撤销等功能，方便数据存储和处理；支持移动端和PC端，便于用户在不同设备上进行签名；支持自定义签名面板的大小、颜色、粗细等样式设置；
手写签名插件—jSignature使用心得
热门推荐
bluelotos893的博客
12-27 3万+
最近需要做一个移动端手写签名的功能，上网搜了一下基本都是jSignature这个插件，几乎没得第二选择，于是照着网上的各个版本copy测试，在PC端测试是没什么问题的，很easy。     问题1：:在移动端改变了canvas的父盒子大小后就出现问题了，手写的和显示的不在一起，jSignature画笔出现了偏移，经过审查元素发现，是由于canvas的尺寸大小变成了100%引起的，解决办法就是需要
使用Vue3.0完成一个todolist
06-11
好的，下面是一个简单的 Vue3.0 Todolist 示例代码： ```html <template> <div> <h1>Todolist</h1> <form @submit.prevent="addTodo"> <input type="text" v-model="newTodo" placeholder="Add a new todo"> <button>Add</button> </form> <ul> <li v-for="(todo, index) in todos" :key="index"> <input type="checkbox" v-model="todo.completed" @change="toggleTodoStatus(index)"> <span :class="{completed: todo.completed}">{{ todo.text }}</span> <button @click="removeTodo(index)">X</button> </li> </ul> </div> </template> <script> import { reactive } from 'vue'; export default { setup() { const state = reactive({ newTodo: '', todos: [], }); const addTodo = () => { if (state.newTodo.trim() !== '') { state.todos.push({ text: state.newTodo, completed: false }); state.newTodo = ''; } }; const toggleTodoStatus = (index) => { state.todos[index].completed = !state.todos[index].completed; }; const removeTodo = (index) => { state.todos.splice(index, 1); }; return { newTodo: state.newTodo, todos: state.todos, addTodo, toggleTodoStatus, removeTodo, }; }, }; </script> <style> .completed { text-decoration: line-through; } </style> ``` 这是一个基本的 Todolist 组件，使用了 Vue3.0 的 Composition API 和响应式数据。在模板中，使用了 v-model 指令来双向绑定输入框和数据，使用 v-for 指令来循环渲染列表项。在 setup 函数中，使用了 reactive 函数来创建响应式数据对象，使用了箭头函数来定义组件的方法。在样式中，使用了伪类选择器 :class 来动态添加类名，实现对已完成的任务的样式修改。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值