React -- 画布无法绘制图像

Question

在这里有一些困难。如果我只是填充或对画布进行任何其他操作-就没有问题。我可以得到不带外部图像的 div。我尝试过本地图像文件和 URL...谢谢！

import React, { Component, PropTypes } from 'react';

export default class CanvasCreator extends Component {

componentDidMount() {
    this.updateCanvas();
}

updateCanvas() {
    const ctx = this.refs.canvas.getContext('2d');

    var imageObj1 = new Image();
    imageObj1.src = 'https://s-media-cache-ak0.pinimg.com/236x/d7/b3/cf/d7b3cfe04c2dc44400547ea6ef94ba35.jpg'
    ctx.drawImage(imageObj1,0,0);

}
render() {
    return (


        <canvas ref="canvas" width={300} height={300}> </canvas>

    );
 }
};

- dualities

Answer 1

你缺少了 onload 方法。以下代码可以解决这个问题：

   updateCanvas() {
    const ctx = this.refs.canvas.getContext('2d');

    var imageObj1 = new Image();
    imageObj1.src = 'https://s-media-cache-ak0.pinimg.com/236x/d7/b3/cf/d7b3cfe04c2dc44400547ea6ef94ba35.jpg'
 imageObj1.onload = function() {
        ctx.drawImage(imageObj1,0,0);
}

}

- Lois Harris

Answer 2

对我来说，为了使其工作，还需要添加宽度和高度！

例如：

imageObj1.onload = function() {
    ctx.drawImage(imageObj1, 0, 0, 500, 500)
}

- Rita Moreira