javascript - getImageData() 返回全零

Question

我正在尝试从图像中输出像素值。图片加载正确；此处的另一个答案表明浏览器正在尝试在图像加载完成之前读取像素，但我可以看到它在 alert() 触发时已加载。

function initContext(canvasID, contextType)
{
   var canvas = document.getElementById(canvasID);
   var context = canvas.getContext(contextType);
   return context;
}

function loadImage(imageSource, context)
{
    var imageObj = new Image();
    imageObj.onload = function()
    {
        context.drawImage(imageObj, 0, 0);
    };
    imageObj.src = imageSource;
    return imageObj;
}

function readImage(imageData)
{
    console.log();
    console.log(imageData.data[0]);
}

var context = initContext('canvas','2d');
var imageObj = loadImage('images/color-test.png',context);
var imageData = context.getImageData(0,0,10,10);
alert();
readImage(imageData);

Answer 1

Image.onload() 在图像加载后被异步调用。这可能会在您当前的代码调用 context.getImageData() 之后发生。

下面的代码应该可以工作:

function initContext(canvasID, contextType)
{
   var canvas = document.getElementById(canvasID);
   var context = canvas.getContext(contextType);
   return context;
}

function loadImage(imageSource, context)
{
    var imageObj = new Image();
    imageObj.onload = function()
    {
        context.drawImage(imageObj, 0, 0);
        var imageData = context.getImageData(0,0,10,10);
        readImage(imageData);
    };
    imageObj.src = imageSource;
    return imageObj;
}

function readImage(imageData)
{
    console.log();
    console.log(imageData.data[0]);
}

var context = initContext('canvas','2d');
var imageObj = loadImage('images/color-test.png',context);

如果您想在 loadImage() 之外访问 imageData 值，您有 2 个基本选择:

1. 将imageData 存储在函数外部声明的变量中。在这种情况下，在调用 onload() 之前，该值将被取消设置，因此外部代码必须在调用 readImage(imageData) 之前测试它的合理性。
2. 让外部代码注册一个回调函数，并让您的 onload() 使用 imageData 值调用该函数。