Javascript 从画布上下文呈现ImageData。在React中获取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方法中渲染它。但是，如果您使用componentDidMount/componentdiddupdate钩子（如果您使用state设置它），则可以绘制它

class-Hi扩展了React.Component{
状态={}；
组件将安装（）{
const canvas=document.createElement（'canvas'）
const context=canvas.getContext（'2d'）
canvas.width=256
canvas.height=256
context.rect（20,20150100）；
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（）{
返回
}
}
render（，document.body）
请将您的
canvas
内容转换为using，然后您可以使用
img
标记渲染图像，该标记将数据URI传递为
src
属性：

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




类示例扩展了React.Component{
状态={}
组件将安装（）{
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；
常数半径=70；
context.beginPath（）；
弧（centerX，centerY，半径，0，2*Math.PI，false）；
context.fillStyle='green'；
context.fill（）；
context.lineWidth=5；
context.strokeStyle='#003300'；
stroke（）；
const dataURI=canvas.toDataURL（）
this.setState（{dataURI}）
}
render（）{
返回
}
}
ReactDOM.render（，document.body）