移动端手写签名

已于 2024-04-09 17:38:38 修改
阅读量687 收藏 9
点赞数 13
分类专栏： # 第一次见你 文章标签： 前端
于 2024-01-02 09:40:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47999208/article/details/135333477
版权
本文探讨了如何在前端项目中使用vue-signature-pad和react-signature-canvas组件处理横屏和竖屏切换时的签名偏移问题，并介绍了如何在全屏模式下自定义canvas行为以适应不同屏幕尺寸。
摘要由CSDN通过智能技术生成

当前端遇见了强制横屏签字的需求...

使用的是

vue:vue-signature-pad 

react:react-signature-canvas

看下效果

  1. touchstart：当用户在触摸设备上触摸屏幕时触发。相当于鼠标事件中的mousedown，表示用户开始触摸屏幕。

  2. touchmove：当用户在触摸设备上滑动手指时触发。相当于鼠标事件中的mousemove，表示用户正在移动手指。

  3. touchend：当用户在触摸设备上松开手指时触发。相当于鼠标事件中的mouseup，表示用户结束触摸操作。

  4.touchcancel：当触摸事件被取消时触发，例如由于系统事件或触摸点超出了浏览器边界。类似于mouseleave事件，表示触摸操作在某种情况下被取消
 

这里在切换成竖屏的时候会有偏移量

<template>
  <div id="app">
    <div style="background: #fff; border:1px solid red;">
      <vue-signature-pad
        id="signature"
        width="95%"
        height="400px"
        ref="signaturePad"
        :options="options"
		v-if='fullScrean'
      />
	  <vue-signature-pad
	    id="signature"
	    width="95%"
	    height="200px"
	    ref="signaturePad"
	    :options="options"
		v-if='!fullScrean'
	  />
    </div>

    <div v-for="(item, index) in imgList" :key="index">
      <img :src="item.src" alt="" width="100" />
    </div>

    <div class="buttons">
		<button @click="fullScreanFuc" class="btn">全屏</button>
      <button @click="save" class="btn">保存</button>
      <button @click="resume" class="btn">重置</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      options: {
        penColor: '#000',
      },
      imgList: [],
      fileList: [],
	  fullScrean:false,
    }
  },
  methods: {
	  fullScreanFuc(){
		this.fullScrean = !this.fullScrean
		this.imgList = []
		this.fileList = []
		this.resume()
		if(this.fullScrean){
			console.log(this.fullScrean)
			console.log(this.$refs.signaturePad)
			var canvas = document.createElement('canvas')
			var ctx = canvas.getContext('2d')
			ctx.strokeStyle = 'black';
			        ctx.lineWidth = 2;
			
			        // 定义变量来跟踪绘画状态和偏移量
			        var isDrawing = false;
			        var offsetYPercent = 0.5; // 20%
			
			        // 计算偏移量
			        var offsetY = canvas.height * offsetYPercent;
			        
			        // 监听鼠标按下事件
			        canvas.addEventListener('mousedown', function(event) {
			            isDrawing = true;
			            // 将绘制路径的起始点移动到鼠标点击位置
			            ctx.beginPath();
			            var x = event.clientX - canvas.offsetLeft;
			            var y = event.clientY - canvas.offsetTop + offsetY; // 添加偏移量
			            ctx.moveTo(x, y);
			        });
			
			        // 监听鼠标移动事件
			        canvas.addEventListener('mousemove', function(event) {
			            if (isDrawing) {
			                var x = event.clientX - canvas.offsetLeft;
			                var y = event.clientY - canvas.offsetTop + offsetY; // 添加偏移量
			                // 绘制线条到当前鼠标位置
			                ctx.lineTo(x, y);
			                ctx.stroke();
			            }
			        });
			
			        // 监听鼠标松开事件
			        canvas.addEventListener('mouseup', function() {
			            isDrawing = false;
			        });
			
			        // 监听鼠标离开 Canvas 区域事件
			        canvas.addEventListener('mouseleave', function() {
			            isDrawing = false;
			        });
		}
	  },
    save() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
		console.log(isEmpty,data)
		if(this.fullScrean){
			this.rotateBase64Img(data, 90, (res) => {
			  console.log(res) // 旋转后的base64图片src
			  this.fileList.push({
			    file: this.dataURLtoFile(res, 'sign'),
			    name: 'sign',
			  })
			  this.imgList.push({
			    src: res,
			  })
			})
		}else{
			this.imgList.push({
			  src: data,
			})
		}


    },

    // 清除重置
    resume() {
      this.$refs.signaturePad.clearSignature()
    },

    // 将base64转换为文件
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }

      return new File([u8arr], filename, { type: mime })
    },

    // 通过canvas旋转图片
    rotateBase64Img(src, edg, callback) {
      var canvas = document.createElement('canvas')
      var ctx = canvas.getContext('2d')

      var imgW //图片宽度
      var imgH //图片高度
      var size //canvas初始大小

      if (edg % 90 != 0) {
        console.error('旋转角度必须是90的倍数!')
        throw '旋转角度必须是90的倍数!'
      }
      edg < 0 && (edg = (edg % 360) + 360)
      const quadrant = (edg / 90) % 4 //旋转象限
      const cutCoor = { sx: 0, sy: 0, ex: 0, ey: 0 } //裁剪坐标

      var image = new Image()

      image.crossOrigin = 'anonymous'
      image.src = src

      image.onload = function () {
        imgW = image.width
        imgH = image.height
        size = imgW > imgH ? imgW : imgH

        canvas.width = size * 2
        canvas.height = size * 2
        switch (quadrant) {
          case 0:
            cutCoor.sx = size
            cutCoor.sy = size
            cutCoor.ex = size + imgW
            cutCoor.ey = size + imgH
            break
          case 1:
            cutCoor.sx = size - imgH
            cutCoor.sy = size
            cutCoor.ex = size
            cutCoor.ey = size + imgW
            break
          case 2:
            cutCoor.sx = size - imgW
            cutCoor.sy = size - imgH
            cutCoor.ex = size
            cutCoor.ey = size
            break
          case 3:
            cutCoor.sx = size
            cutCoor.sy = size - imgW
            cutCoor.ex = size + imgH
            cutCoor.ey = size + imgW
            break
        }

        ctx.translate(size, size)
        ctx.rotate((edg * Math.PI) / 180)
        ctx.drawImage(image, 0, 0)

        var imgData = ctx.getImageData(
          cutCoor.sx,
          cutCoor.sy,
          cutCoor.ex,
          cutCoor.ey
        )

        if (quadrant % 2 == 0) {
          canvas.width = imgW
          canvas.height = imgH
        } else {
          canvas.width = imgH
          canvas.height = imgW
        }
        ctx.putImageData(imgData, 0, 0)
        callback(canvas.toDataURL())
      }
    },
  },
}
</script>

<style lang="scss">
html,
body {
  padding: 0;
  margin: 0;
}
#app {
  width: 100vw;
  height: 100vh;
  background: #ececec;
}

.btn {
  width: 35%;
  color: #fff;
  background: #5daaf3;
  border: none;
  height: 40px;
  border-radius: 20px;
  margin-top: 20px;
  margin-left: 40px;
}
</style>

就要设置偏移量，但是这个组件内部封装了canvas，，不太好设置

于是自己写了个

<template>
  <view class="content">
    <view class="text-area">
      <canvas
        id="drawCol"
        ref="drawCol"
        v-if="isCol"
        width="400"
        height="400"
      ></canvas>
      <canvas
        id="drawRow"
        ref="drawRow"
        v-if="!isCol"
        width="400"
        height="800"
      ></canvas>
    </view>
    <img
      :src="src"
      v-if="isCol"
      style="border: 1px solid red; width: 200px; height: 200px"
    />
    <img
      :src="src"
      v-if="!isCol"
      style="border: 1px solid red; width: 400px; height: 200px"
    />
    <br />
    <button @click="drawCol('drawCol')">横屏</button>
    <br />
    <button @click="drawRow('drawRow')">竖屏</button>
    <br />
    <button @click="submit">提交</button>
    <br />
    <button @click="hasContentFuc">有值吗</button>
    {{ hasContent }}
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      isCol: true,
      src: "",
      hasContent: false,
    };
  },
  mounted() {},
  methods: {
    rotateBase64Img(src, edg, callback) {
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      var imgW; //图片宽度
      var imgH; //图片高度
      var size; //canvas初始大小

      if (edg % 90 != 0) {
        console.error("旋转角度必须是90的倍数!");
        throw "旋转角度必须是90的倍数!";
      }
      edg < 0 && (edg = (edg % 360) + 360);
      const quadrant = (edg / 90) % 4; //旋转象限
      const cutCoor = { sx: 0, sy: 0, ex: 0, ey: 0 }; //裁剪坐标
      var image = new Image();
      image.crossOrigin = "anonymous";
      image.src = src;
      image.onload = function () {
        imgW = image.width;
        imgH = image.height;
        size = imgW > imgH ? imgW : imgH;

        canvas.width = size * 2;
        canvas.height = size * 2;
        switch (quadrant) {
          case 0:
            cutCoor.sx = size;
            cutCoor.sy = size;
            cutCoor.ex = size + imgW;
            cutCoor.ey = size + imgH;
            break;
          case 1:
            cutCoor.sx = size - imgH;
            cutCoor.sy = size;
            cutCoor.ex = size;
            cutCoor.ey = size + imgW;
            break;
          case 2:
            cutCoor.sx = size - imgW;
            cutCoor.sy = size - imgH;
            cutCoor.ex = size;
            cutCoor.ey = size;
            break;
          case 3:
            cutCoor.sx = size;
            cutCoor.sy = size - imgW;
            cutCoor.ex = size + imgH;
            cutCoor.ey = size + imgW;
            break;
        }

        ctx.translate(size, size);
        ctx.rotate((edg * Math.PI) / 180);
        ctx.drawImage(image, 0, 0);

        var imgData = ctx.getImageData(
          cutCoor.sx,
          cutCoor.sy,
          cutCoor.ex,
          cutCoor.ey
        );

        if (quadrant % 2 == 0) {
          canvas.width = imgW;
          canvas.height = imgH;
        } else {
          canvas.width = imgH;
          canvas.height = imgW;
        }
        ctx.putImageData(imgData, 0, 0);
        callback(canvas.toDataURL());
      };
    },
    hasContentFuc() {
      let canvas = document.getElementsByTagName("canvas");

      console.log(1, canvas);
      let ctx = canvas.getContext("2d");
      let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      let data = imgData.data;
      for (let i = 0; i < data.length; i += 4) {
        if (data[i + 3] > 0) {
          this.hasContent = true;
          break;
        }
      }
    },
    submit() {
      if (this.isCol) {
        this.src = this.$refs.drawCol?.toDataURL();
      } else {
        this.rotateBase64Img(this.$refs.drawRow?.toDataURL(), 270, (res) => {
          this.src = res;
        });
      }
      console.log(this.$refs.drawCol, this.$refs.drawCol?.toDataURL());
      console.log(this.$refs.drawRow, this.$refs.drawRow?.toDataURL());
    },
    drawCol(e) {
      this.isCol = true;
      this.$nextTick(() => {
        this.startDrawn(e);
      });
    },
    drawRow(e) {
      this.isCol = false;
      this.$nextTick(() => {
        this.startDrawn(e);
      });
    },
    startDrawn(e) {
      var canvas = document.getElementById(e);
      var ctx = canvas.getContext("2d");
      ctx.strokeStyle = "black";
      ctx.lineWidth = 2;
      canvas.addEventListener("touchstart", startDrawing);
      canvas.addEventListener("touchmove", continueDrawing);
      canvas.addEventListener("touchend", stopDrawing);

      var isDrawing = false;
      function startDrawing(e) {
        isDrawing = true;
        var touch = e.touches[0];
        var x = touch.clientX;
        var y = touch.clientY;
        ctx.beginPath();
        ctx.moveTo(x, y);
      }
      function continueDrawing(e) {
        if (!isDrawing) return;
        var touch = e.touches[0];
        var x = touch.clientX;
        var y = touch.clientY;
        ctx.lineTo(x, y);
        ctx.stroke();
      }

      function stopDrawing() {
        isDrawing = false;
      }
      // canvas.addEventListener("touchcancel", function () {
      //   isDrawing = false;
      // });
    },
  },
};
</script>

<style>
/* 	.text-area {
		border:1px solid red;
	} */
canvas {
  border: #333 1px solid;
}
</style>

每天吃饭的羊
关注
专栏目录
react-native-signature-canvas：用于Android && IOS && expo的基于React Native Signature组件的WebView Canvas
02-05
React本机签名画布 对Android && IOS && expo的基于本地签名组件的Canvas进行React 支持Android，iOS和Expo 没有本地依赖项的纯JavaScript实现 经过RN 0.50测试 核心使用 只依靠React和React本机 生成签名的base64编码png图像注意：从Expo SDK v33.0.0开始，Expo支持React Native Signature Canvas v1.5.0。 安装（适用于React Native V0.60.0或Expo SDK v35.0.0） npm install --save react-native-
2023-01-12 工作记录--React-使用react-signature-canvas实现手写签名
weixin_48850734的博客
01-12 905
React-使用react-signature-canvas实现手写签名
移动端Canvas实现手写签名
最新发布
qq_42072014的博客
07-22 542
希望本文能帮助你在移动端手写签名的开发道路上迈出坚实的一步。在移动应用开发中，手写签名功能的集成已经成为许多业务场景的标配，比如电子合同签署、医疗记录确认或是物流配送签收等。本文将详细阐述如何在移动端实现手写签名，包括技术选型、具体实现步骤以及优化建议，帮助开发者快速上手并构建高质量的手写签名体验。HTML5 的 Canvas API 提供了在网页上绘制图形的能力，包括路径、文本、图像等，非常适合用来捕捉和展示手写签名。在移动端，Canvas API 也能很好地适应触摸输入，实现流畅的手写体验。
react签字功能 react-signature-canvas
qq_30351747的博客
06-25 1873
react签字功能 react-signature-canvas
react实现手写签名（带实操图）
qq_43001049的博客
03-14 3270
最近碰到了一个项目需要记录个人签名，网上搜了一下，最终选择了react-signature-canvas，下面写一个demo记录一下插件： 引入插件： npm i -S react-signature-canvas yarn add react-signature-canvas npm install react-signature-canvas 使用 首先在页面中引入 import SignatureCanvas from 'react-signature-canvas' 用法十分简单，如果没什么也
react-signature-canvas 实现 移动端电子签名功能
~~~
11-10 1219
react-signature-canvas 实现 移动端电子签名功能
react实现电子签名
DT_XUE321的博客
07-29 714
react实现电子签名，主要是用 react-signature-canvas 实现
vue使用canvas实现移动端手写签名
10-14
使用canvas实现移动端手写签名"> 重写 保存签名 ``` 2. **Vue组件**： 在Vue组件中，我们需要定义一个名为`Draw`的类来处理Canvas上的绘制逻辑。这个类将包含用于开始、结束和绘制线条的方法。 ```javascript ...
移动端手写签名js
05-07
javascript移动端手写签名，通过canvas绘制，base64图片
移动端手写签名 手写签名
06-27
本文将深入探讨移动端手写签名的实现原理和关键步骤。 1. **HTML5 Canvas**: 移动端手写签名的核心技术是HTML5的Canvas元素。Canvas提供了一个可编程的2D绘图表面，允许开发者通过JavaScript来绘制图形，包括线条、...
vue+canvas实现移动端手写签名
12-28
本文实例为大家分享了vue+canvas实现移动端手写签名的具体代码，供大家参考，具体内容如下 <i class=el-icon-arrow-left click=goBack></i> 个人签名 <div class=canvasBox
react-signature:用于签名板的React插件
05-19
React签名 用于响应的签名板组件。 通过参考来实现。 与所有现代浏览器兼容。 为了使该组件适用于IE8，请在HTML文件顶部导入exanvas。 演示与范例 演示存储库： : 要在本地构建示例，请首先克隆存储库，然后运行： npm install npm start 然后在浏览器中打开 。 安装 使用react-signature的最简单方法是从NPM安装它，并将其包含在您自己的React构建过程中（使用 ， 等）。 您还可以通过在页面中包含dist/react-signature.js来使用独立版本。 如果使用它，请确保已经包含React，并且它可以作为全局变量使用。 npm install react-signature --save 用法 初始化： var ReactSignature = require ( 'react-signature' ) ; <
使用React Signature Canvas打造动态签名功能
gitblog_00071的博客
04-17 514
使用React Signature Canvas打造动态签名功能 项目地址:https://gitcode.com/agilgur5/react-signature-canvas 在开发互动性高的Web应用时，有时我们需要提供一个让用户自由签名的功能，比如电子合同、在线表单等。为此，React Signature Canvas是一个强大的开源库，它允许我们在React应用中轻松集成可自定义的签名板...
React实现手写签名---react-signature-canvas
my_love_download的博客
05-28 4117
使用react-signature-canvas实现手写签名 1. 首先安装插件 npm install react-signature-canvas --save 2.组件实现 import React, { Fragment } from "react"; import ReactDOM from "react-dom"; import SignatureCanvas from "react-signature-canvas"; import "../style/electronicSignature
React实现在移动端进行签字
Anony_me的博客
02-23 977
这里使用了 useState 钩子来创建了一个名为 signatureDataUrl 的状态变量，用于保存签名数据的base64编码。在 handleClear 和 handleSave 函数中，除了清除签名和保存签名的操作外，还使用了 setSignatureDataUrl 函数来更新签名数据的状态变量。在用户签名后，签名数据的base64编码会被保存到 signatureDataUrl 状态变量中，可以将其发送到后端保存签名图片。然后，在需要使用签名组件的React组件中，导入。
react 手写签名
qq_39306005的博客
07-20 287
2、现手写签名并生成图片。
react-signature-canvas实现电子签名
juxiaoyu的博客
06-10 4633
1、执行npm install react-signature-canvas --save 2、采用react+typescript，代码如下： import React, { Component } from 'react'; import './scss/index.scss'; import SignatureCanvas from 'react-signature-canvas' ...
React实现H5横屏电子签名板
l1134的博客
08-18 1588
React实现H5横屏电子签名板
移动端VUE-H5手写电子签名的实现（生成base64图片）- 竖版
zhaotian2017的博客
09-21 1218
实现形式：html页面中引入vue方式。
vue移动端手写签名
06-02
要在Vue移动端实现手写签名功能，你可以使用一个名为vue-signature-pad的第三方组件，它提供了一个canvas画布，用户可以在上面手写签名。 首先，你需要在你的项目中安装vue-signature-pad组件，可以使用npm命令进行安装： ``` npm install vue-signature-pad --save ``` 然后在你的Vue组件中引入该组件，并在模板中使用，示例如下： ```html <template> <div> <vue-signature-pad ref="signaturePad"></vue-signature-pad> <button @click="clear">清除</button> <button @click="save">保存</button> </div> </template> <script> import VueSignaturePad from "vue-signature-pad"; export default { components: { VueSignaturePad }, methods: { clear() { this.$refs.signaturePad.clear(); }, save() { const data = this.$refs.signaturePad.toDataURL(); // 将签名数据保存到服务器或本地存储中 console.log(data); } } }; </script> ``` 在上面的示例中，我们引入了vue-signature-pad组件，并在模板中使用了它。我们还添加了两个按钮，一个用于清除签名，另一个用于保存签名数据。当用户完成签名后，可以通过调用toDataURL()方法获取签名的数据URL，并将其保存到服务器或本地存储中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

每天吃饭的羊

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

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

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

打赏作者

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

抵扣说明：

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

余额充值