从屏幕外画布上绘制的图像像素中采样颜色的问题

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

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

Answer 2

因为图像尚未加载和绘制。你在 onload 触发后绘制它，那么你也应该得到 RGB 值。

image.onload 函数将在您的采样函数之后触发，因此您此时只需对一个空画布进行采样。