Question

用户从他的电脑中选择图像。然后app将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)
    );
};

Answer 1

您只需将该数据网址用作图片来源：

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;
        }}
      />
    );
  }
}

从react-konva的redux商店转移img

1 个答案: