リアクション - キャンバスは画像を描画しません

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> 

    ); 
} 
}; 

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

}