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)。谢谢你的帮助！

getImageData（）返回所有0＆＃39; s

1 个答案: