关于js实现手写签名

原有的业务逻辑是用户线下签字,然后拍照后将照片上传到后台系统。用户将手机端照片转移到电脑也很复杂。特别是对于非自己的电脑的图片上传。所以将业务转到ipad或者surface上,减少操作逻辑。

1. 实现操作逻辑

这个直接参考MDN的触摸事件的文档。里面提供了完整的代码。

将其整理成React组件形式如下:

js 复制代码
import React, { useEffect, forwardRef, useImperativeHandle, useState } from 'react';

const Signature: React.FC = (props, ref) => {
    const color = "#000";
    useImperativeHandle(ref, () => ({
        getImage: () => new Promise((resolve,reject) => {
            // 返回处理后的数据形式
        })
    }));

    useEffect(() => {
        const el = document.querySelector("#signCanvas");
        el?.addEventListener("touchstart", handleStart, false);
        el?.addEventListener("touchend", handleEnd, false);
        el?.addEventListener("touchmove", handleMove, false);
    }, [])
    
    // 所有方法参考MDN内的实现方法
    const ongoingTouches = [];
    function copyTouch(touch) {}
    function ongoingTouchIndexById(idToFind) { }
    function handleStart(evt) {}
    function handleMove(evt) {}
    function handleEnd(evt) {}
  return (
        <canvas id="signCanvas" width="600" height="600" style={{border: "solid #aaa 1px"}}>
          你的浏览器不支持 canvas 元素。
        </canvas>
  );
};

export default forwardRef(Signature);

2. 注意细节

1. 获取canvas元素

ini 复制代码
// MDN中获取元素的类型
const el = document.getElementsByTagName("canvas")[0];

如果代码中已经有了canvas元素,比如antd中使用的QrCode组件。

2. 坐标设置(无滚动条)

MDN中的demo使用的pageX和pageY默认使用的是屏幕左上角,我使用的时候用的是弹窗打开,弹窗位于页面中间。 此时应该基于弹窗的位置进行设置。

为啥是top*2?试出来的,我也不知道

js 复制代码
// 在start方法中挪动坐标位置
    function handleStart(evt) {
        evt.preventDefault();
        const el = document.querySelector("#signCanvas");
        const ctx = el?.getContext("2d");
        const { left, top } = el?.getBoundingClientRect();
        ctx?.translate(0 - left, 0 - top*2);
        .......
     }
// 每次画完再把坐标复原,不然,坐标每画一次挪一次,就越来越远了。
    function handleEnd(evt) {
        evt.preventDefault();
        const el = document.querySelector("#signCanvas");
        const ctx = el?.getContext("2d");       
        const { left, top } = el?.getBoundingClientRect();
        ctx?.translate(0 + left, 0 + top*2);  
        ......
    }

3. 坐标取值(有滚动条)

当弹窗下的页面出现滚动条时,pageX,pageY会把滚动条计算进去。此时要改成screenX,screenY

4. 将签名转图片保存

1. 转base64图片

js 复制代码
            const el = document.querySelector("#signCanvas");
            el?.toBlob((blob) => {
                var reader = new FileReader();
                reader.readAsDataURL(blob); 
                reader.onloadend = function() {
                  var base64data = reader.result;   
                  resolve(base64data)        
                }
            },  "image/png")

2. 转file类型

js 复制代码
// 解析文件
export const base64ToFile = (dataurl) => {
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = window.atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  let blob = new File([u8arr], 'file.png', { type: mime });
  return blob; 
};

// 将base64转为file
  const file = base64ToFile(base64data);   

5. 兼容性

用到了Touch事件,不支持safari浏览器

相关推荐
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem2 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术2 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing2 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码4 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github