getImageData()返回全0

Question

所以，我有一个这样的函数：

var getRGBArray = function (img) {
    // create the canvas we need to work with 
    var canvas = document.createElement('canvas');

    // get the canvas context
    var context = canvas.getContext("2d");

    // will store the image data and the returned array
    var imgData, rgbArray = [];

    // make sure that the width and height are correct
    context.canvas.width = img.naturalWidth;
    context.canvas.height = img.naturalHeight;

    // draw the image
    context.drawImage(img, img.naturalWidth, img.naturalHeight);

    // get the image data 
    imgData = context.getImageData(0, 0, img.naturalWidth, img.naturalHeight);

    // imgData contains r,g,b,alpha values. We skip
    // the alpha value. 
    for (var i = 0, n = 0; i < imgData.data.length; i+=4, n+=3) {
        rgbArray[n] = imgData.data[i];
        rgbArray[n+1] = imgData.data[i+1];
        rgbArray[n+2] = imgData.data[i+2];

        // imgData.data[i+3] is the alpha channel. We ignore it. 
    }
    return rgbArray;
};

它只是获取一张图像，并返回一个像[r0, g0, b0, r1, g1, b1, ..., rn, gn, bn]一样设置的数组。

首先，返回的数组是完全空的，这显然是一个问题。

其次，当我在Firefox的控制台窗口中输入所有这些内容时，imgData数组的长度是合理的，但是所有的数据都是0！没有一个值是未定义的，我有一个简单的网页，我正在调试。网页已经加载了图像，而我只是使用document.getElementById('testImage')获取图像。

有人能给我解释一下为什么会这样吗？

编辑:这不同于this，因为我想知道为什么drawImage()要给我一个全是0的数据数组，他们要求的是完全不同的东西。

Answer 1

我找到问题了。在context.drawImage()中，我没有在开始位置传球。修复方法是将其更改为：context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight)。谢谢你的帮助!