将图像上传到redux并在React-Konva中显示

时间:2018-07-03 12:54:54

标签: reactjs redux react-redux konvajs

我已经尝试了将图片上传到Redux并以多种方式显示在React-Konva中。但这是行不通的。在base64和blob中。但是在正常情况下,例如使用组件的状态来保存数据(base64),它是可以工作的。我不知道为什么 在我的组件中,只有用于上传的按钮和React-Konva组件,用于显示图片

this is error from base64 store in redux and show to Image Tag

def get_object(self):
    return get_object_or_404(
        Attendee,
        order__order_reference=self.kwargs['slug:ticket_reference'],
        access_key=self.kwargs['access_key'],
    )

1 个答案:

答案 0 :(得分:1)

要在react-konva中使用图像,您必须创建window.Image的本机实例。

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

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

https://konvajs.github.io/docs/react/Images.html