Question

我正在尝试创建一个简单的应用程序来使用reactJS拍照。

看来，我能找到的所有示例都是使用ref的老派，以及我们不再使用的所有有趣的内容，

但是，无论如何，目前它不起作用。根据我看过的教程，我需要将我的视频元素传递到画布中，我不理解。

无论如何，我当前的组件如下：

export default class Camera extends Component {
 constructor (props) {
    super(props)

    this.canvasRef = React.createRef()
    this.videoRef = React.createRef()
    this.state = {
      stream: {}
    }
  }

  async componentDidMount () {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 } })

      if (stream) {
        this.setState({
          stream
        })
      }
    } catch (err) {
      console.error(err)
    }
  }

  render () {
    const video = document.getElementById('video')
    const context = (this.canvasRef && this.canvasRef.getContext('2d'))
    context && context.drawImage(document.getElementById('video'), 0, 0, 640, 480)
    return (
      <>
        <video id='video' width='640' heigh='480' src={this.state.stream} autoPlay={true}/>
        <button onClick={(evt) => console.warn('take photo')}>Take photo!</button>
        <div>
          <canvas id='canvas' width='640' height='480' ref={ref => (this.canvasRef = ref)} />
        </div>
      </>
    )
  }
}

目前，我所得到的只是一个空白屏幕。问题似乎出在画布上，但我不知道我做错了什么。我还应该提到，理想情况下，我什至不想使用引用。我只想使用道具，也可以使用状态，但我想首先必须使它按现在的样子工作。

Answer 1

据我所知，命令动画仍然是refs的非常有效的用例： https://reactjs.org/docs/refs-and-the-dom.html。

在构造函数中，声明画布：

this.canvasRef = React.createRef();

然后像这样使用它

const canvas = this.canvasRef.current;
const ctx = canvas.getContext("2d");

然后在渲染函数中，将ref分配给画布元素：

<canvas ref={this.canvasRef} />

我个人认为将Canvas纳入反应生命周期非常棘手，但是绝对可以做到。祝你好运！

无法显示画布元素以用于反应图片应用

1 个答案: