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