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

如果您想访问imageData以外的值loadImage(),您有两个基本选择:

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