Javascript 从屏幕外画布上绘制的图像像素采样颜色时出现问题

我需要从图像中采样像素颜色，但似乎无法正确获取。我加载图像并将其绘制到屏幕外的画布上，然后尝试采样像素颜色，但总是得到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);

---

我没有错误，如果我尝试在屏幕画布上绘制图像，图像将正确绘制。我无法找到问题，因为图像尚未加载和绘制。在启动onload后绘制它，然后也应该获得RGB值

image.onload函数稍后将启动采样函数，因此此时只需对空画布进行采样。

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

随机画布
var canvas=document.getElementById（“canvas1”）；
//画布宽度=200；
//画布宽度=200；
var context=canvas.getContext（'2d'）；
//设置图像
var image=新图像（）；
image.src=“img/image.jpg”；
image.onload=函数（）
{
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；
警报（'Image:'+Image.src+'\n\nR:'+rgbaVal[0]+'\nG:'+rgbaVal[1]+'\nB:'+rgbaVal[2]+'\nA:'+rgbaVal[3]+'\n\n单词：'+x+'，'+y）；
}
//从画布中随机采样一个像素

---

但即使我删除.onload并将图像（context.drawImage（image，0，0）；）绘制到画布上，我仍然会得到相同的结果。有些东西告诉我，我没有用正确的方法将图像绘制到画布上？不要移除onload，而是在onload中获取像素颜色。好吧，这是可行的，但只在不在本地运行代码的情况下。有什么解决方法吗（不包括在启动时设置浏览器参数之类的）？如果您安装了python，请将cd放入包含文件的目录，然后输入-python-msimplehttpserver。几周前，我遇到了与您完全相同的问题，这就是我采取的方法。