javascript - 从React中的canvas context.getImageData渲染ImageData

在React组件中，如何渲染使用画布创建的图像？

componentWillMount () {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  canvas.width = 256
  canvas.height = 256
  // omitted canvas painting code
  const image = context.getImageData(0, 0, canvas.width, canvas.height)
  this.setState({image})
}

render() {
  return ?
}

最佳答案

我不确定您可以直接在render方法中渲染它。但是，如果您使用stateD设置它，则可以使用componentDidMount / componentDidUpdate钩子来绘制它。

class Hi extends React.Component {
  state = {};
  componentWillMount () {
    const canvas = document.createElement('canvas')
    const context = canvas.getContext('2d')
    canvas.width = 256
    canvas.height = 256
    context.rect(20,20,150,100);
    context.stroke();
    const image = context.getImageData(0, 0, canvas.width, canvas.height)
    this.setState({image})
  }
  componentDidMount() {
    const context = this.refs.canvas.getContext('2d');
    context.putImageData(this.state.image, 0, 0);
  }
  render() {
    return <canvas ref="canvas" />
  }
}

ReactDOM.render(<Hi />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

关于javascript - 从React中的canvas context.getImageData渲染ImageData，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44383453/