は、キャンバスにイメージファイルを反応させ、その後、選択しBASE64

Question

に変換私は、ファイル上でこの機能を持っている：

uploadFile(e) { 
    var ctx = this.refs.canvas.getContext('2d'); 
    var url = URL.createObjectURL(e.target.files[0]); 
    var img = new Image(); 

    img.src = url; 
    img.onload = function() {  
     ctx.drawImage(img, 0, 0, 600, 600, 
      0, 0, 200, 200);  
    } 

    var dataImg = this.refs.canvas.toDataURL(); 
    console.log(dataImg); 
} 


render() { 
    return (
    <div> 
     <canvas ref="canvas" width={200} height={200}> </canvas> 
    </div> 
); 
} 

をそれが実際にキャンバスに画像を変換しますがtoDataURLが空白のデータ画像を生成します。私は生成されたキャンバスをbase64データイメージに変換したかったのです。どんな考え？

Answer 1

だけonloadハンドラ内toDataURL()を移動します。今のところtoDataURL()は画像が描画される前に実行されるため、空の画像になります。

はまた、コールが非同期であるとして、データのURLを取得した後にコールバック/約束の使用を検討したい、とあなたには、いくつかの他の関数にデータ-URLを渡していきます。

さらに、電話の前にthisを参照して以下に示すように範囲を追跡する必要があります。また、コールバックハンドラでbind()を使用することもできます。いくつかの点で失敗する可能性があります -

var me = this; // keep reference for inner call 
img.onload = function() { 
    ctx.drawImage(this, 0, 0, 600, 600,  // `this` is now image 
         0, 0, 200, 200); 
    // this line needs to go here 
    var dataImg = me.refs.canvas.toDataURL(); // note `me` being used here 
    console.log(dataImg); 
    // consider a callback to pass result to next function in chain 
}; 
// set src last 
img.src = url;