CODEWITHSUNDEEP
image-processingreact-reduxkonvajs
Igor Chernega
Igor Chernega

Reputation: 631

Transfer img from redux store in react-konva

User selects image from his pc. Then app reads file with FileReader as DataUrl and then the result is dispatched in store. And now I need to make an image for display from that DataUrl. I think it should be somehow transferred and parsed in 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)
    );
};

Upvotes: 1

Views: 104

Answers (1)

lavrton
lavrton

Reputation: 20288

You just need to use that data url as image source:

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

Upvotes: 1

Related Questions