3分钟上手react-signature-canvasReact手写签名Canvas快速入门教程【免费下载链接】react-signature-canvasA React wrapper component around signature_pad (in 150 LoC). 100% test coverage, types, examples, more. Unopinionated and heavily updated fork of react-signature-pad项目地址: https://gitcode.com/gh_mirrors/re/react-signature-canvasreact-signature-canvas 是一款轻量的React 手写签名组件基于 signature_pad 的无侵入封装几行代码就能在 React 项目中加上一块电子签名e-signatureCanvas。它用 TypeScript 编写、内置完整类型、100% 测试覆盖兼容 React 0.14 – 19还提供裁剪空白等实用 API是表单签名、合同确认场景的省心之选。 为什么选择 react-signature-canvas✍️纯 Canvas 封装只渲染一个canvas元素不附加任何样式和多余按钮无主见unopinionated设计融入任何 UI 都轻松零配置上手npm 一行安装TypeScript 类型开箱即用质量过硬100% 测试覆盖测试见test/index.spec.tsx主组件不到 150 行核心实现在src/index.tsx️完全可控笔色、粗细、间距等通过 props 调整清空、导出、裁剪等方法通过 ref 调用兼容范围广官方支持 React 0.14 – 19见package.json的 peerDependencies 一步完成安装npm i -S react-signature-canvas️ 最小可用签名板引入组件即可渲染一个能立刻画字的手写签名 Canvasimport SignatureCanvas from react-signature-canvas SignatureCanvas penColorgreen canvasProps{{ width: 500, height: 200 }} /常用 Prop作用默认值penColor笔迹颜色blackminWidth/maxWidth笔迹最小/最大粗细0.5/2.5minDistance相邻采样点最小距离5canvasProps直接透传给底层canvas尺寸、className 等—clearOnResize窗口 resize 时是否清空画布true此外还有dotSize、throttle以及onBegin/onEnd起笔/落笔回调等完整 props 定义可在src/index.tsx的propTypes中查看全部可选。 ref API 速查表所有 API 都需要先拿到组件的 ref之后就能方法作用isEmpty()判断画布是否为空适合控制提交按钮可用性clear()清空签名toDataURL()/fromDataURL()以 base64 图片导出 / 回写签名toData()/fromData()以点组数组导出 / 回写签名适合存后端再还原getTrimmedCanvas()返回去掉全部空白边距的签名画布副本成品图更清爽getCanvas()/getSignaturePad()拿到底层 canvas 元素 / SignaturePad 实例自由扩展典型用法——提交时先校验非空再导出一张裁剪后的签名图const sigCanvas useRef(null) function getSignatureImage () { if (sigCanvas.current.isEmpty()) return null return sigCanvas.current.getTrimmedCanvas().toDataURL(image/png) } SignatureCanvas ref{sigCanvas} / 运行本地示例仓库自带可交互示例位于example/目录执行npm start后访问 localhost:1234即可看到带Clear / Trim按钮的签名板。示例代码在example/src/index.js布局样式参考example/src/styles.module.css——照着它改两行就能搭出你自己的签名页。⚠️ 新手常见问题resize 后签名被清空默认clearOnResize为true窗口尺寸变化会重置画布需要保留内容时显式传clearOnResize{false}对应测试见test/index.spec.tsx。建议固定尺寸通过canvasProps传入明确的width和height可跳过自动 resize 逻辑避免签名变形。ref 什么时候可用组件挂载/卸载期间 ref 为 null此时调用方法会抛出友好的提示错误见src/index.tsx中的refNullError。类型文件在哪组件整体用 TypeScript 编写src/index.tsxtrim-canvas的声明位于types/trim-canvas.d.ts你的项目无需额外补 d.ts。✅ 小结react-signature-canvas 把React 手写签名 Canvas的接入成本压缩到 3 分钟一行安装、一个组件、一个 ref即可拥有完整的电子签名能力——保存、还原、导出图片、裁剪空白全部有现成 API无需再自己封装 Canvas。【免费下载链接】react-signature-canvasA React wrapper component around signature_pad (in 150 LoC). 100% test coverage, types, examples, more. Unopinionated and heavily updated fork of react-signature-pad项目地址: https://gitcode.com/gh_mirrors/re/react-signature-canvas创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考