本变态国庆闲来无事，突然想到最近工作中用到的一个小知识。感觉对于初学者投简历来说至少是一个小小的亮点可以稍微写一下。至少不用写一些面向antd组件开发的东西。 大多数人其实工作中用到canvas机会并不多，这恰巧对面试官来说是一个比较感兴趣的事情。原生或者vue也可以简单实现一下
import { Button } from "antd";
import React, { useState } from "react";
import { useEffect } from "react";
import { useRef } from "react";
const Cavans1 = () => {
//判断是否绘制过
const [isDrawed, setisDrawed] = useState(0);
const cref = useRef("");
const imgref = useRef("");
//判断是否正在绘画的状态
let isDrawing = false;
//利用宽度特性将canvas画布清除，
const handleCancel = () => {
cref.current.width = cref.current.width;
};
//将canvas转为img图片
const handleConfirm = () => {
if (isDrawed > 1||isDrawed===0) {
return;
}
// 第一种方法 采用data:application/octet-stream ,让浏览器识别为下载，有大小限制，12000*4000无法保存
let image = new Image();
image.src = cref.current.toDataURL({
format: "image/png",
quality: 1,
});
console.log(image.src);
// var url = image.src.replace(
// /^data:image\/[^;]/,
// "data:application/octet-stream"
// );
image.style.height = "100px";
image.style.width = "100px";
image.style.display="block"
imgref.current.appendChild(image);
setisDrawed(isDrawed+1)
//清除画布
cref.current.width = cref.current.width;
return;
// window.open(url);
};
useEffect(() => {
const ctx = cref.current.getContext("2d");
// const ctx =cvs.getContext('2d')
// console.log(ctx)
cref.current.addEventListener("mousedown", (e) => {
isDrawing = true;
setisDrawed(isDrawed+1)
ctx.moveTo(e.offsetX, e.offsetY);
});
cref.current.addEventListener("mousemove", (e) => {
if (isDrawing) {
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
// console.log(e);
}
});
cref.current.addEventListener("mouseup", (e) => {
isDrawing = false;
});
}, []);
return (
<>
<h1>我是canvas</h1>
<div className="imgContainer">
<canvas
ref={cref}
width="500"
height="500"
id="cvs"
style={{ border: "1px solid #f0b52b" }}
></canvas>
</div>
<div style={{ display: "flex", justifyContent: "right" }}>
<Button
type="primary"
style={{ marginRight: "10px" }}
onClick={handleConfirm}
>
确定
</Button>
<Button type="error" danger onClick={handleCancel}>
取消
</Button>
</div>
<div ref={imgref} >
</div>
</>
);
};
export default Cavans1;
上面几十行代码就实现了一个基本能用的canvas手写签名的示例，
用react简单写了一个实例。如果不是特别想研究的话可以花个半小时简单看看我的git仓库代码。想要研究的话其实后面涉及可玩的点还有很多，例如文件格式转化，大文件上传，以及原生canvas不做一些操作的话手写的文字其实不是特别顺滑的感觉感兴趣的同学可以在深挖一下。
思路
- 我用了vite做了一个小demo放在码云上，感兴趣的同学可以看一下，记得给我点个小赞
- 获取canvas标签在useeffct中添加三个事件利用canvas的moveTo/lineTo/stroke去绘制签名可以去菜鸟搜一下这三个标签的用法，其实这时候已经能画了
- 当我们绘制完成后可以用canvas的toDataURL事件将canvas的画板转为base64的链接，在将链接插入到img中
- canvas其实不能够检测文件的绘制情况这里我在之前利用setisDrawed设置了状态，这样可以做一些操作
- 这样一个简易的canvas手写签名就已经完成了，我们就可以将image.src的base64位文件传给后端，在项目中已经处于基本能用的转态当然后面可能需要去做一下封装，可以做成一个hook,下面由同学们自行操作，后面有时间我自己封装一个钩子去实现这个功能。
- canvas很简单但是我们日常用的不多，写到简历里至少我感觉是一个小小的加分项，至少不是特别平庸。而且demo也简单。并且想深挖一下有非常多的知识可以学。
- 地址gitee.com/kaixinjiuwa…
