Question

我正在构建一个可以使用指针签名的应用。

现在我需要从画布上获取签名并将其显示为弹出窗口，并且在其自述文件中说有一个功能toDataURL()

toDataURL（mimetype，encoderOptions）：base64string，将签名图像作为数据URL返回

它表示可以通过API进行访问

API
所有API方法都需要对SignatureCanvas的引用才能使用，并且是该引用的实例方法。 <SignatureCanvas ref={(ref) => { this.sigCanvas = ref }} />

但是，我无法访问此功能或此处描述的任何功能。我尝试使用useRef()，createRef()，但仍然没有使用。也许我只是做得不好。

请在下面的父组件中找到多余的行：

import React, { createRef } from 'react';
import ReactCanvas from 'react-signature-canvas';

interface IProps {}

interface IState {}

export default class App extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div className="content-area">
        <ReactCanvas penColor='black' canvasProps={{width: 353, height: 120}} />
      </div>
    );
  }
}

我试图像这样private myRef = createRef<ReactCanvas>()创建引用，然后使用它

const canvasRef = this.myRef.current
    if (canvasRef) {
      canvasRef.props.toDataURL('image/png', 1);
    }

它说

类型'Readonly＆Readonly <{子代？：ReactNode; }>'。

ref在子元素中，例如<ReactCanvas penColor='black' canvasProps={{width: 353, height: 120}} ref={this.myRef} />

您能告诉我我该怎么做吗，否则您将非常感谢您的指导/建议。

Answer 1

我找到了方法。

首先，我需要创建一个空对象sigCanvas: any = {}，然后用它在ReactCanvas组件<ReactCanvas minWidth={1} maxWidth={2} canvasProps={{width: 353, height: 120}} ref={(ref) => { this.sigPad = ref }} />中创建引用，然后可以在类似这样的函数中使用它

getCanvasImage = () => {
    this.setState({toDataUrl: this.sigPad.getTrimmedCanvas()
      .toDataURL('image/png', 1)})
  }

Answer 2

我认为您应该使用ComponentDidMount方法将图像添加到画布上

export default class App extends React.Component<IProps, IState> {
  private canvasRef = createRef<ReactCanvas>();
  constructor(props: IProps) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.canvasRef.current.toDataURL('image/png', 1);
  }
  render() {
    return (
      <div className="content-area">
        <ReactCanvas
          penColor="black"
          canvasProps={{ width: 353, height: 120 }}
          ref={this.canvasRef}
        />
      </div>
    );
  }
}

然后我在本地计算机上尝试了，而且有效！

从父组件访问子画布元素

2 个答案: