React 自定义组件实现手写签名
Posted 一杯清泉
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 自定义组件实现手写签名相关的知识,希望对你有一定的参考价值。
import * as React from 'react';
import SignaturePad from 'react-signature-canvas';
import useEffect, useMemo, useRef, useState from 'react';
const Signature = ( onBegin , ref) =>
const divRef = useRef();
useEffect(() =>
ref.current.getSignaturePad()._canvas.width = divRef.current?.clientWidth;
ref.current.getSignaturePad()._canvas.height = 200;
, [divRef.current]);
// 不添加这个,背景默认是透明的,可以看到图片下层的内容,按需添加
useEffect(() =>
let canvas = ref.current._canvas;
if (canvas.getContext)
let ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff'; //添加颜色
ctx.fillRect(0, 0, canvas.width, canvas.height);
, [ref.current]);
return (
<div ref=divRef>
<SignaturePad ref=ref onBegin=onBegin />
</div>
);
;
export default React.forwardRef(Signature);
使用:
const [signed, isSigned] = useState(false);
const canvasRef = useRef();
<Signature ref=canvasRef onBegin=() => isSigned(true) />
其他方法:
// 确认
const confirm = (callback) =>
const canvas = canvasRef.current?.getSignaturePad()._canvas;
// 图片转为 base64
const dataurl = canvasRef.current?.toDataURL('image/png').toString();
//图片上传
canvas.toBlob((blob) =>
// 开始上传
, 'image/png');
;
// 清空签名
const clear = () =>
canvasRef.current?.clear();
;
以上是关于React 自定义组件实现手写签名的主要内容,如果未能解决你的问题,请参考以下文章