オフスクリーンキャンバスに描画されたイメージピクセルの色をサンプリングする際の問題

Question

ピクセルカラーをイメージからサンプリングする必要がありますが、正しく取得できないようです。イメージをロードしてオフスクリーンのキャンバスに描画してから、ピクセルカラーをサンプリングしようとしますが、私は常に0値を取得します。

マイコード：

// Create canvas and set context 
var canvas = document.createElement('canvas'); 
canvas.width = 8; 
canvas.width = 8; 
var context = canvas.getContext('2d'); 

// Setup image 
var image = new Image(); 
image.src = 'img.png'; 
image.onload = function(){ 
    context.drawImage(image, 0, 0); 
} 

// Sample a random pixel from the canvas 
var x = Math.floor(Math.random()*8); 
var y = Math.floor(Math.random()*8); 
var pixelInfo = context.getImageData(x,y,1,1); 
var rgbaVal = pixelInfo.data; 
alert('Image: '+image.src+'\n\nR: '+rgbaVal[0]+'\nG: '+rgbaVal[1]+'\nB: '+rgbaVal[2]+'\nA: '+rgbaVal[3]+'\n\nCoords: '+x+', '+y); 

私はエラーを取得していないと私は、画面上のキャンバスに画像を描画しようとすると、画像が正しく描画します。私は問題を見つけることができません

Answer 1

イメージはまだ読み込まれていないので、描画されていません。あなたはonloadが発生した後に描画します。そして、RGB値も取得します。

image.onload関数はサンプリング関数の後で起動するため、現時点で空のキャンバスをサンプリングするだけです。

Answer 2

<canvas id="canvas1" width="200", height="200" style="background:red;">Random Canvas</canvas> 
<script> 

    var canvas = document.getElementById("canvas1"); 
    //canvas.width = 200; 
    //canvas.width = 200; 
    var context = canvas.getContext('2d'); 

    // Setup image 
    var image = new Image(); 
    image.src = "img/image.jpg"; 

    image.onload = function() 
    { 

     context.drawImage(image, 0, 0); 

     var x = Math.floor(Math.random()*200); 
     var y = Math.floor(Math.random()*200); 
     var pixelInfo = context.getImageData(x,y,1,1); 
     var rgbaVal = pixelInfo.data; 

     alert('Image: '+image.src+'\n\nR: '+rgbaVal[0]+'\nG: '+rgbaVal[1]+'\nB: '+rgbaVal[2]+'\nA: '+rgbaVal[3]+'\n\nCoords: '+x+', '+y); 

    } 

    // Sample a random pixel from the canvas 

</script>