Image processing 从react konva的redux商店转移img

用户从电脑中选择图像。然后应用程序使用

FileReader

作为

DataUrl

读取文件，然后将结果发送到存储中。现在我需要从

DataUrl

中制作一个图像来显示。我认为它应该以某种方式在react konva中传输和解析

inputImageChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
  const file = e.currentTarget.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = evt =>
    this.props.dispatch(
      surfaceGridModalActions.inputSurfaceGridImage(evt.target.result)
    );
};

inputImageChanged=（e:React.ChangeEvent）=>{
const file=e.currentTarget.files[0]；
const reader=new FileReader（）；
reader.readAsDataURL（文件）；
reader.onload=evt=>
这是我的道具(
surfaceGridModalActions.inputSurfaceGridImage（evt.target.result）
);
};

您只需将该数据url用作图像源：

class UserImage extends React.Component {
  state = {
    image: new window.Image()
  };
  componentDidMount() {
    this.state.image.src = this.props.dataURL;
    this.state.image.onload = () => {
      // so we need to update layer manually
      this.imageNode.getLayer().batchDraw();
    };
  }

  render() {
    return (
      <Image
        image={this.state.image}
        y={250}
        ref={node => {
          this.imageNode = node;
        }}
      />
    );
  }
}

类UserImage扩展React.Component{ 状态={ image:newwindow.image（） }; componentDidMount（）{ this.state.image.src=this.props.dataURL； this.state.image.onload=（）=>{ //所以我们需要手动更新图层 this.imageNode.getLayer（）.batchDraw（）； }; } render（）{ 返回( { this.imageNode=节点； }} /> ); } }