react实现手写签名（带实操图）

最近碰到了一个项目需要记录个人签名，网上搜了一下，最终选择了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'

用法十分简单，如果没什么也别的要求，只需要设置长宽

 <SignatureCanvas penColor='black'ref={(ref) => { this.sigCanvas = ref }} //用于调用插件的APIcanvasProps={{width: window.outerWidth*.9, height: '200px', style:{position:'absolute',top:0,left:0,}, className: 'sigCanvas'}} />

该插件本身自带了很多个API，详情可以去看官网
在这里我就演示其中一个清除

<button style={{marginTop:20}} onClick={()=>this.sigCanvas.clear()}>点击清除</button>

全部源码：

/*** 签名**/
import React from 'react';
import {Page,
} from "framework7-react";
import SignatureCanvas from 'react-signature-canvas'export default class SignatureMain extends React.Component {constructor(props) {super(props);this.state = {}}render() {return (<Page style={{backgroundColor:"#f1f1f1"}}><div style={{width:window.outerWidth*.9,marginLeft:'5%',height:"200px",marginTop:20,backgroundColor:"#fff",borderRadius:"7px",border:"1px solid #ccc",position:"relative"}}><SignatureCanvaspenColor='black'ref={(ref) => { this.sigCanvas = ref }} //用于调用插件的APIcanvasProps={{width: window.outerWidth*.9, height: '200px', style:{position:'absolute',top:0,left:0,},className: 'sigCanvas'}} /></div><button style={{marginTop:20}} onClick={()=>this.sigCanvas.clear()}>点击清除</button></Page>)}
}

效果图

下载

下载可以参考我前面写的

react 二维码生成并下载qrcode.react

里面的下载部分

react实现手写签名（带实操图）相关推荐

jsignature插件实操，完成手写签名图片格式功能
jSignature是什么,如何使用? jSignature是一个H5基于canvas画布得一个插件可以用于手机,浏览器进行手写签名功能实现啦 Jsignature使用效果展示注:本插件最新版是支持 ...
手写签名插件—jSignature使用心得
最近需要做一个移动端手写签名的功能,上网搜了一下基本都是jSignature这个插件,几乎没得第二选择,于是照着网上的各个版本copy测试,在PC端测试是没什么问题的,很easy. 问题1::在移动端 ...
程序包清单签名验证失败_数字世界的手写签名
<中华人民共和国电子签名法>规定"可靠的电子签名与手写签名或者盖章具有同等的法律效力",那么如何在数字世界实现手写签名?数字世界的手写签名主要解决什么问题呢?数字世界的 ...
html app签名,html5手写签名
sxqm 清空生成图片 var canvas, board; canvas = document.getElementById('myCanvas'); canvas.height = 300; ...
vue 手写签名_与众不同的手写签批
随着移动互联网+时代的到来,手机成了我们日常生活中不可缺少的必备用品,它不仅仅是一个通讯工具,更是一台移动电脑.因此越来越多的单位把希望在手机上就能完成业务的处理,但也希望能还原线下办理的效果.因此, ...
React，手写简易redux（二）- By Viga
React,手写简易redux(二) 本章节会完成一个简易的redux实现该系列内容会逐步实现简易的redux 使用技术栈:vite+react 该系列感谢@方应杭的react教学视频目录实现 ...
vue 手写签名_用 Mac 制作手写签名，没打印机也能搞事
得益于基础设施进步,现在想搞点事,比以前快捷便利多了,线下能办的事儿一部分转到了线上,一人一机,操纵于千里. 开展业务,很多地方都会要求你提供签字授权,比如想给网站做个备案,或者想快速走个线上合同, ...
手写签名（H5\小程序）
做个笔记! 手写签名主要是用canvas实现.通过监听手指触碰屏幕事件来完成(touchstart.touchmove.touchcancel) H5: 这里是用的vue封装一个手写签名的组件 htm ...
asp手写签名代码2021版提供源码控件
今天接了一个小事,一个朋友想实现货物在线签收,要收货人在线签名,并保存入库,让我帮忙写一个asp的手写签名功能,忙活一下午实现了,估计会有很多人有这种需求,放网上吧 function lineCanv ...

react实现手写签名（带实操图）

下载

react实现手写签名（带实操图）相关推荐

最新文章

热门文章