How to load Image on canvas in React?

Question

How to upload Image to the full width/height of the canvas in React? for example:

class PlanPage extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.setState({
      canvasA: {
        canvasWidth: 800,
        canvasHeight: 600
      }
    })
  }

  componentDidMount() {
    this.props.getDataMap(); //return object which has the fields e.g. id,... and field URL which specifies where image is  
    const { canvasWidth, canvasHeight } = this.state.canvasA;
    this.canvasA.width = canvasWidth;
    this.canvasA.height = canvasHeight;
  }
......
<canvas
  ref={canvasA => this.canvasA = canvasA} /> //canvas

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

will appreciated any help.

score 20 · Accepted Answer · answered Jun 22 '17 at 16:30

20

You can try something like this

componentDidMount() {
  const context = this.canvasA.getContext('2d');

  const image = new Image();
  image.src = "whereever-you-image-url-live.jpg";
  image.onload = () => {
    context.drawImage(image, 0, 0, this.canvasA.width, this.canvasA.height);
  };
}

answered Jun 22 '17 at 16:30

Nick Wyman

1,150
11
18

3

30 minutes to discover I had used `onLoad` instead of `onload` . Just thought I would share that because if you're here you might wonder if there's something magical about react that is preventing your canvas from working, when in actual fact perhaps you made a silly mistake like me – Max Carroll Jul 18 '20 at 13:29
1

Yeah, you have to aware of what type of object you are using. If you are using a React image object, it would be `onLoad`. But if it is a regular HTML img element, it is `onload`. In this case, since it just in a canvas, its the regular HTML image element. – Nick Wyman Jul 23 '20 at 18:22
1

first set image.onload, then image.src – matepal297 Oct 27 '20 at 16:06

How to load Image on canvas in React?

1 Answers1

Linked