在 React 中从画布 context.getImageData 渲染 ImageData答案

【问题标题】：Render ImageData from canvas context.getImageData in React在 React 中从画布 context.getImageData 渲染 ImageData
【发布时间】：2017-06-06 07:07:00
【问题描述】：

在 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 ?
}

【问题讨论】：

标签： javascript reactjs canvas

【解决方案1】：

我不确定你是否可以直接在渲染方法中渲染它。但是如果你用 state 设置它，你可以使用 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>

【讨论】：

【解决方案2】：

请使用canvas.toDataURL 将您的canvas 内容转换为data URI，然后您可以使用img 标记渲染图像，并将数据URI 作为src 属性传递：

<img src={this.state.dataURI} />

class Example extends React.Component {
  state = {}

  componentWillMount () {
    const canvas = document.createElement('canvas')
    const context = canvas.getContext('2d')
    canvas.width = 256
    canvas.height = 256
    
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = 70;

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'green';
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = '#003300';
    context.stroke();

    const dataURI = canvas.toDataURL()
    this.setState({dataURI})
  }

  render() {
    return <img src={this.state.dataURI} />
  }
}

ReactDOM.render(<Example />, 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>

【讨论】：