Javascript imageData返回0的数组

我正在尝试操作imageData，但是在加载图像并获取其像素数据后，我的imageData数组返回了全0。

有一些html元素，例如滑块和文本框。请忽略那些。

我有一个ImageObject数据结构，其中存储了所有图像属性，例如image，pixelData等。

我首先加载图像，获取其像素数据，然后返回一个回调以存储ImageObject.imageData。但是，在日志中ImageObject.data返回全0。

ImageObject = {};
var MainCtx;
var MainCanvas;
//get the image pixel properties

function start()
{
    //load up the main canvas and ctx
    MainCanvas = document.getElementById("canvas");
    MainCtx = MainCanvas.getContext('2d');

    //first load up the image and then get its pixel data
    ImageObject.loadImage(function(imageData){
        ImageObject.imageData = imageData;
        ImageObject.data = ImageObject.imageData.data;

        console.log(ImageObject.data); // -> data return all 0's in the array

        for(var i = 0; i < ImageObject.data.length; i += 4) {
            var brightness = 0.34 * ImageObject.data[i] + 0.5 * ImageObject.data[i + 1] + 0.16 * ImageObject.data[i + 2];
          // red
          ImageObject.data[i] = brightness;
          // green
          ImageObject.data[i + 1] = brightness;
          // blue
          ImageObject.data[i + 2] = brightness;
      }

      ImageObject.ctx.putImageData(ImageObject.imageData,ImageObject.image.width,ImageObject.image.height);
  });
}

ImageObject.loadImage = function(callback)
{
    ImageObject.image = new Image();
    ImageObject.image.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
    ImageObject.image.addEventListener('load',function()
    {
        MainCtx.drawImage(ImageObject.image,0,0);
        callback(ImageObject.getImageData(ImageObject.image));
    });
}

ImageObject.getImageData = function(img)
{
    this.canvas = getCanvas(img.width,img.height);
    this.ctx = this.canvas.getContext('2d');
    return this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height);
}

function getCanvas(w,h)
{
    var c = document.createElement('canvas');
    c.width = w;
    c.height = h;
    return c;
}

start();

我分享了下面的jsFiddle链接

jsFiddle

有人可以看看我在做什么错吗？

最佳答案

您的问题是，您要从在getCanvas函数内部创建的新 Canvas 获取图像数据。您需要在现有 Canvas 上运行getImageData。

这是console.log的更新

console.log(MainCtx.getImageData(0, 0, MainCanvas.width, MainCanvas.height));

当您从其他来源加载图像时，这仍然无法立即起作用，因此请确保首先在本地托管图像。

关于Javascript imageData返回0的数组，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29186329/