react-sign-lim

react-sign-lim

Getting Started

Install dependencies,

$    npm install react-sign-lim --save
    // 或
$    pnpm install react-sign-lim --save
    // 或
$    yarn add react-sign-lim

组件使用

import React, { useState } from 'react';
import ReactSign from 'react-sign-lim';
import { Button, Space, Divider } from 'antd';
import 'antd/dist/antd.css';
console.log(ReactSign, Button);

function Index() {
  const $sign = React.createRef();
  const [imageSrc, setImageSrc] = useState();
  const reset = () => $sign.current.reset();
  const toImage = () => $sign.current.toImage().then((res) => setImageSrc(res));
  const toClip = () => $sign.current.clip().then((res) => setImageSrc(res));

  return (
    <div>
      <div style={{ border: '1px solid red', padding: '10px' }}>
        <ReactSign ref={$sign} lineWidth={6} height={300} width={800} bgColor={'#fff'} />
      </div>

      <Space style={{ margin: '20px 0' }}>
        <Button onClick={reset} type="primary" danger>
          重置
        </Button>
        <Button onClick={toImage} type="primary">
          转为图片
        </Button>
        <Button onClick={toClip}>截取</Button>
      </Space>

      {imageSrc && (
        <div>
          <Divider style={{ visibility: 'hidden' }} />
          <img src={imageSrc} alt="截图" />
        </div>
      )}
    </div>
  );
}

export default Index;

参数说明

组件 props 可传入参数如下：

参数名	参数值	说明	默认值
width	number	签字版宽度	800
height	number	签字版高度	300
lineWidth	number	签字笔笔尖宽度	4
lineColor	string	签字笔颜色	"#FF0"
bgColor	string	签字版背景颜色	""
quality	number	导出签字图片质量	1
required	Boolen	导出签名前是否校验有效书写	false

组件暴露出的实例方法

• toImage()，返回一个 Promise；参数是为图片 base64 字符串；
• clip()，返回一个 Promise；参数是为图片 base64 字符串，同时会裁剪签字板，会尽可能截取签字的有效区域导出图片；
• rest()，清空签字画板。

gitLab 地址

https://gitlab.com/react-component1/react-sign-lim.git