getImageData()返回所有零

Question

我试图从图像中输出像素值。图像正在正确加载；这里的另一个答案是，浏览器试图在图像加载完成之前读取像素，但我可以看到，在激活警报()时，它已经加载。

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

Answer 2

这也是可能的，你正在评估的一部分图像是透明的。我扫描PNG的时候遇到了这个问题。

Answer 3

共享我在使用循环同时请求多个图像并分别获取它们的像素时遇到的情况。然后我遇到了这个问题。

//my code looks like this
for(let i = 0; i < urls.length; ++i){
    let img = new Image() // it will be destoryed every loop begin, even if use keyword 'var' insteads of 'let'.  
    img.onload = ()=>{
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0)
      let imgData = ctx.getImageData(0, 0, 1024, 1024) // imgData will be all 0 or some other unexpected result.
    }
    img.src = urls[i]
}

// fixed bug
window.imgs = []
for(let i = 0; i < urls.length; ++i)
    window.imgs[i] = new Image()
for(let i = 0; i < urls.length; ++i){
    let img = window.imgs[i]
    img.onload = ()=>{
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0)
      let imgData = ctx.getImageData(0, 0, 1024, 1024) 
    }
    img.src = urls[i]
}

原因可能是对象引用、垃圾收集等问题。我不知道。因为我是js的初学者。