Question

7

How to load Image on canvas in React?

rated 0 times [ 10] [ 3] / answers: 1 / hits: 17702 / 7 Years ago, thu, june 22, 2017, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marcelofrankiea

Add To Favorites

Follow

Total Points: 200

Total Questions: 96

Total Answers: 101

Location: Tonga

Member since Tue, Nov 30, 2021

3 Years ago

answered 7 Years ago jazminuniquer · Accepted Answer

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

  };

}