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()值，您有两个基本选择：

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

Answer 2

您也可以评估透明图像的一部分。我在扫描PNG时遇到了这个问题。

getImageData（）返回全零

2 个答案: