Javascript getImageData（）返回所有0'；s

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

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

var getRGBArray=函数（img）{
//创建我们需要使用的画布
var canvas=document.createElement（'canvas'）；
//获取画布上下文
var context=canvas.getContext（“2d”）；
//将存储图像数据和返回的数组
var imgData，rgbArray=[]；
//确保宽度和高度正确
context.canvas.width=img.naturalWidth；
context.canvas.height=img.naturalHeight；
//画图像
背景图（img，img.naturalWidth，img.naturalHeight）；
//获取图像数据
imgData=context.getImageData（0,0，img.naturalWidth，img.naturalHeight）；
//imgData包含r，g，b，alpha值。我们跳过
//alpha值。
对于（变量i=0，n=0；i

它只需要获取一个图像并返回一个数组，该数组的设置类似于

[r0，g0，b0，r1，g1，b1，…，rn，gn，bn]

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

其次，当我在Firefox的控制台窗口中输入所有这些内容时，

imgData

数组的长度是合理的，但所有数据都是0！没有一个值是未定义的，我有一个简单的网页正在调试。网页已经加载了图像，我只是使用

document.getElementById（'testImage'）

获取图像

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

---

编辑：这不同于，因为我想知道为什么

drawImage（）

会返回一个包含所有0的数据数组。他们的要求完全不同

我发现了这个问题。在

context.drawImage（）

中，我没有传递起始位置。修复方法是将其更改为：

context.drawImage（img，0，0，img.naturalWidth，img.naturalHeight）

。谢谢你的帮助

您能否生成一个简单的测试用例并将其放在类似这样的网站上？函数返回一个空结果的事实向我表明，

img.naturalWidth

和

img.naturalHeight

是

0

，图像还没有实际加载。这很好地说明了问题：我发现了问题。在

context.drawImage（）

中，我没有传递起始位置。修复方法是将其更改为：

context.drawImage（img，0，0，img.naturalWidth，img.naturalHeight）

。谢谢你的帮助@K3N：我对我认为的“欺骗”很自由，但我认为这里有一个错误。尽管“重复”问题中的bug最终与这里代码中的bug相同，但问题本身却大不相同。我认为这就像是在“什么是”上做标记√16“作为“原电影中有多少捉鬼者”的复制品”。